WordPressでHTML,CSS,PHP,JavaScriptなどのソースを綺麗に表示する

HTML,CSS,PHP,JavaScriptなどのソースを以下の画面キャプチャのように表示しているサイトをみたことはありませんでしょうか。

 

WordPressは、デフォルトのままで投稿画面にソースを記述しても

 

<?php
echo “こんにちは”;
?>

 

のように普通に表示されてしまいます。

（PHPであればexce-phpというプラグインを利用すると実行してくれます。興味のある方はコチラをどうぞ）

 

この表示だととても見づらいですが、WordPressには、ソースコードを綺麗に表示する「Crayon Syntax Highlighter」というプラグインが存在します。

 

本ブログでもソースコードと合わせて紹介する記事が増えてきたので、これを機に導入してみましたところ、思いのほか簡単だったのでもっと早く使っていればよかったと後悔しております。。。

 

そんなわけで本日は 「Crayon Syntax Highlighter」を紹介したいと思います。

 

Crayon Syntax Highlighterのインストールから使い方まで

WordPress管理画面の左メニューのプラグインから、「プラグインを追加」の画面の検索フィールドに「Crayon Syntax Highlighter」と入力して検索し、該当プラグインのインストールボタンをクリックします。

 

インストールが完了したら「プラグインを有効化」をクリックします。

 

有効が成功したら、以下のメッセージが表示されます。

 

左メニューの「設定」から「Crayon」をクリックします。

 

テーマやフォント、サイズなどが指定できるので 自サイトにマッチするよう調整を行い。「変更を保存」ボタンをクリックします。（ちなみに本サイトではデフォルトのままです）

 

これで、設定が完了しました。

早速使ってみます。

 

いつものようにテストサイト（penguinweb.net）にて記事を作っていますので、実際のサイトをご覧になりたい方はコチラを参考にしてください。

 

記事投稿画面の挿入したい場所にカーソルがある状態で、テキストモードの状態で「Crayon」ボタンをクリックします。

 

すると、オーバーレイで、ソース入力画面が立ち上がります。必要な項目を入力して画面右上の「挿入」ボタンをクリックします。（本サイトでは、プログラム言語ソースの項目以外は空です）

 

ここではプログラム言語をPHPとしています。

 

すると、投稿画面に先ほど入力したソースにpreタグとclassが入った状態で挿入されます。

ここで、特殊文字「>」が「&gt;」になっていますが、classにある「lang:php decode:true」のとおり、表示されるときはデコードされますのでご安心ください。

 

投稿内容に問題がなければ「公開」をクリックして表示を確認してみましょう。

 

意図通りに表示されていることがわかります。

 

最後に

ソースコードを綺麗に表示するプラグインとして有名なのは「SyntaxHighlighter Evolved」かと思います。

 

このプラグインは「Crayon Syntax Highlighter」と比べると、機能が少ないです。

大きなところでいうとテーマの量やフォントが少ないです。

 

個人的には「Crayon Syntax Highlighter」の方がカスタマイズの自由度は高いので、こちらを使うことにしました。

 

WordPressはプラグインが豊富ですが、同じような機能の場合は選定に時間がかかるのが最近の悩みの種です。。。