記事中にソースコードを表示するプラグイン – Crayon Syntax Highlighterの設定と使い方

プラグイン「Crayon Syntax Highlighter」を追加すると、記事中に見やすいソースコードを表示させることができます。Webサイト上で「HTML」「CSS」「PHP」の解説をする際に使うと便利です。

設定

プラグインから、Crayon Syntax Highlighterを追加して有効化すると、管理画面の設定欄に「Crayon」が追加されるので、そこから各種設定を行います。

Crayon Syntax Highlighterの設定

Crayon Syntax Highlighterの設定

デザインの変更

細かい設定もできますが、初期設定のままで問題なく使えます。

僕は5箇所程変更していますが、全てデザイン的な要素です。特に変更する必要はありません。変更したい方はプレビューを確認しながら変更を行って下さい。

Crayon Syntax Highlighterの変更した項目

Crayon Syntax Highlighterの変更した項目

初期設定では、CrayonのCSSとJavaScriptが全てのページで読み込まれてしまいますが、その他の「必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる」にチェックを入れれば、関係ないページの表示速度スコアは若干改善されます。

最後に「変更を保存」をクリックして設定完了です。

使い方

記事編集画面に「Crayon」タグが追加されるので、クリックして設定を行います(ビジュアルエディタでは「<>」タグが追加されます)。

記事編集画面のCrayonタグ

記事編集画面のCrayonタグ

ソースコード以外は全て任意です。

Add Codeの設定

Add Codeの設定

  1. ソースコードの入力(必須)
  2. 入力するとツールバーにタイトルが表示されます(任意)
  3. 入力するとツールバーに言語が表示されます(任意)
  4. 入力した数字の行が黄色でハイライトされます(任意)
  5. 挿入をクリックして完了

ハイライトは「,」で区切って複数行指定及び「」で範囲を指定することができます。また、「Line Range」で入力した行のみを表示させることもできます。設定項目は使う必要はありません。

特に設定が必要なければ「preタグ」で囲むだけでも機能します。

Crayon Syntax Highlighterを使う理由

例えば、文字を赤くする方法を紹介したい時、コードそのまま記述すれば下記の様になります。

赤い文字

コードを表示させるには、特殊文字を文字実体参照に置き換えなければいけません。

<span style=”color: #ff0000;”>赤い文字</span>

特殊文字 文字実体参照
< &lt;
> &gt;
&quot;
& &amp;

面倒くさいですね・・・。

また、WordPressは一部の特殊文字「“(引用符)」等をコピーした際に自動で全角変換されます(文字実体参照やpreタグ内を除く)。詳細は関数リファレンス/wptexturizeで確認できます。

PHPを編集して自動変換させている関数を止めることもできますが、ソースをのまま表示させるプラグイン「Crayon Syntax Highlighter」を使った方が簡単かつ見やすいと思います。

最後に

同じ機能を持ったプラグインSyntaxHighlighter Evolvedも使ってみたのですが、個人的にはCrayon Syntax Highlighterの方が使いやすかったです。

ブログでソースコードを表示させたい時には必須のプラグインだと思います。

スポンサーリンク
スポンサーリンク