WordPress ではソースコードを綺麗に表示してくれるプラグインが沢山ありますが、今更ですがこのブログでもそのようなプラグインを導入してみました。
シンタックスカラー系のプラグインでは SyntaxHighlighter Evolved や WP SyntaxHighlighter がメジャーなようですが、私は Crayon Syntax Highlighter というプラグインを導入しました。
Crayon Syntax Highlighter を選んだ理由は単に見た目だけです。
Crayon Syntax Highlighter のインストール
通常のプラグインと同じように WordPress 管理画面のメニューから「プラグイン」>「新規追加」を選択して「Crayon Syntax Highlighter 」で検索すると、一番上に出てくるので「いますぐインストール」をクリックすれば普通にインストール出来ますよ。
Crayon Syntax Highlighter の使い方
プラグインをインストールして有効化すれば、特に何の設定もしなくても <pre> タグで囲まれた内容がちゃんと整形されて表示されます。
例えばこのブログの「PHP で今表示しているページの URL を取得する
」という記事の中のソースコード（<pre>で囲まれた内容）がこんな感じ
で表示されるようになりました。
Crayon Syntax Highlighter の設定
特に設定をしなくてもちゃんと整形表示してくれますが見た目だとかを自分好みにすると良いかもですね。ちなみに私は（上のスクリーンショットでは）ちょっとだけ設定を変えてあります。
設定は、WordPress 管理画面の「設定」>「Crayon」から変更します。
私は「一般設定」からテーマを「Github」へ変更し、行間（Line Height）を 22 ピクセルにし、横幅を 600 ピクセルにして、
「ツールバー」を「マウスオーバー時」に表示するように変更。
最後に、設定画面の下の方にある「その他」の「必要な時だけ Crayon の CSS と javaScript を読み込むように試みる」にチェックを入れておくとよさげなのでチェックを入れた。
「試みる」ってのがちょっと心配だけどww
まとめ
今更ながらシンタックスハイライト系のプラグインを入れてみましたが、なんでもっと早くインストールしなかったんだろ・・。というくらいお手軽でとっても綺麗に表示してくれます。
私のショボショボなソースコードが、さもそれらしいソースコードに見えるようになりました。
まるで L レンズで初めて写真撮影した時に「腕が上がった」と勘違いをするくらいの描写をした時の感覚と同じです（笑）。
今まで何となくシンタックスハイライト系プラグインを導入していない人はぜひインストールしてみてくださいね 。
でわでわ。
