WordPressでソースコードを綺麗に表示する

WordPressでソースコードを綺麗に表示したい。

プログラムのコードを載せるような技術系のブログを書いているユーザーにとって、コードを綺麗に見せることは至上命題である。
今回はWordPress（AFFINGER5テーマ）でコードを綺麗に表示する方法を紹介。

デフォルトのコード表示

当ブログではテーマはSTINGER系の有料テーマであるAFFINGER5(WING)、エディタにMarkdown Editorを使っている。

: WordPressのMarkdownプラグイン

マークダウン表記では「 ``` 」で前後を囲んで記述するとコードを意味し、ブラウザでHTMLを表示する際には pre と code のタグで囲われた状態になる。　

しかしデフォルトでコードを表示すると以下のような見づらい表示になってしまう。

これを綺麗なコードの表示にしたい。

綺麗なコードの表示とは

技術系のブログでよく下のように整理された表示のコードを見たことがあるだろう。
以下のような特徴を持つ表記である。

他とは異なるコード用のエリアに書かれている
行番号がある
コードに色が付いている

ただのテキストの羅列ではなく、このようなコードだとわかる表記をシンタックスハイライトという。

シンタックスハイライトのやり方

WordPressで何かやりたい場合は大体プラグインを使う。
シンタックスハイライト用にもいくつかプラグインが存在する。

Code Prettify

Googleの作った code-prettify というjavascriptでコードを見やすくする方法を組み込んだWordPressプラグイン。
恐らくプラグインを利用するかは置いて置いて、シンタックスハイライトの方法としては最も利用されている方法ではないだろうか。

よくあるエディタのように色をつけたりすることで、もっとソースコードが見やすくなります。これを実現するには、JavaScriptのライブラリを使うのが手っ取り早いです。当ブログでは、Googleが開発している「code-prettify」というライブラリを使ってソースコードのシンタックスハイライトを実装しています。
技術ブログの「ソースコード」表示を効果的にカスタマイズする方法 | maesblog

しかし残念なことにAFFINGER5(WING)のテーマと相性が悪いのか、設定しても効果が得られなかった。