WordPress 記事にソースコードを表示する Crayon Syntax Highlighter

プラグイン

ブログ記事内に ソースコード を表示したい場合、
普通に記載すると、段落がなかったり色が変化しないため、綺麗に表示されません。

Crayon Syntax Highlighter は、
ブログ記事内にソースコードを挿入した場合、綺麗に表示してくれるプラグインです。

ソースコードを挿入する場合は、Crayon Syntax Highlighter を利用しましょう。

スポンサーリンク

Crayon Syntax Highlighter と
SyntaxHighlighter Evolved の違い

WordPress にソースコードを綺麗に表示するプラグインは複数あり、
SyntaxHighlighter Evolved でも、簡単にソースコードを表示できます。

ソースコードを記事に表示する「SyntaxHighlighter Evolved」
記事内に「CSS」「PHP」「html」などのソースコードを挿入したい場合、普通に記載してしまうと、段落が無くなったり、色分けされないため、綺麗に表示されません。SyntaxHighlighter Evolved は、記事にソースコードを挿入する際、エディタのように綺麗にソースコードを表示できるプラグイン…

Crayon Syntax Highlighter と SyntaxHighlighter Evolved の違いは、

Crayon Syntax Highlighter の方が、様々な設定が可能で、
「別ウィンドウで開く・コピー」といったボタンがある「ボックス内」に表示される点です。

こだわって表示したい方は Crayon Syntax Highlighter を利用しましょう。

Crayon Syntax Highlighter のインストール

ダッシュボードから「プラグイン → 新規追加」をクリックし、
検索窓で「Crayon Syntax Highlighter」と検索しましょう。

検索後、Crayon Syntax Highlighter の今すぐインストールをクリック。

Crayon Syntax Highlighter

インストール後「プラグインを有効化」をクリックすれば完了です。

Crayon Syntax Highlighter の設定

Crayon Syntax Highlighter の設定は「設定 → Crayon」から行えます。

Crayon Syntax Highlighter

ですが、特に変更すべき点はありません。デフォルトのままでOKです。

記事内に ソースコード を挿入する方法

記事内にソースコードを挿入する場合は、
記事編集画面から「ビジュアル → テキスト」に変更し【Crayon】のボタンをクリックします。

Crayon

Crayon をクリックすると、別ウィンドウが開きます。

表示したいコードを入力し【挿入】をクリックすれば、記事内への挿入は完了です。

Crayon

まとめ

  • 記事内にソースコードを表示したい場合は Crayon Syntax Highlighter を利用する。
  • 設定はデフォルトのままでOK。
  • コードを挿入する場合は、テキストに変更し【Crayon】のボタンから挿入する。

コメント