ブログ上でソースコードを掲載する際に、色付けして見やすくしてくれる、シンタックスハイライトはぜひ導入したい。本記事では、WordPressでWP CodeHighlight.jsというプラグインを用いてハイライト表示する方法を紹介したい。UnityのC#スクリプトに適用するには、他の記事では触れられていない落とし穴もあるので注意が必要だ。
はてなブログの場合
これまで利用していたはてなブログでは、以下の手順でシンタックスハイライトを適用していた。
- はてな記法で>|cs|…||<と記述（※C#の場合）
- プレビューで生成されたHTMLコードをコピー
- 見たままモードでコードを貼り付け
普段、記事を書くのは「見たままモード」なので、シンタックスハイライト機能のある「はてな記法」からコードをコピペしてくるというわずらわしさがあった。はてなブログでは、執筆中にブログの編集モードを切り替えることができない。
デフォルトのままでも、白地に予約語やコメントが淡く色分けされたカラーリングはお気に入りだった。特にコメント行が青色で目立つのが読みやすく、Visual Studioのデフォルト設定よりも優れているように見える。
WordPressの場合
はてなブログから記事をそのままWordPressにインポートしても、はてな記法のソースコード部分は問題なく表示されるようだ。ただし色分けはされないので、ずいぶん素っ気ない見た目になってしまう。やはりWordPress流のやり方でシンタックスハイライトを適用した方がいいだろう。
WordPressではプラグインやJavaScriptを使った方法がいくつか紹介されている。従来はCrayon Syntax Highlighterというプラグインが標準的だったらしいが、「表示速度が遅い、見た目がダサい」という理由でほかのツールに乗り換える人が増えているようだ。
Prism.jsはうまくいかなかった
まず非プラグインで軽量・高速といわれるprism.jsを試してみた。公式サイトからデザインテーマと対応コードを指定して、jsファイルとcssファイルをダウンロードする。自分の場合、SimplicityのWordPressテーマをカスタムして使っているので、子テーマのフォルダに両ファイルをアップした。さらにfunctions.phpにファイルを読み込むコードを追記して、こちらも子テーマフォルダにアップした。
記事中では、
[code]<pre><code class=”language-clike”>…</code></pre>[/code]
というタグで囲めばいいはずなのだが、なぜかうまくいかない。ハイライト表示されないうえ、なぜかコードが途中で切れて非表示になってしまう。
下準備としてはHTMLのヘッダーでJSとCSSファイルを読み込ませればいいだけのはずだが、これ以外のところにも原因があるように思われる。functions.phpの書き方を工夫したり試行錯誤したが、結局うまくいかずあきらめてしまった。
WP CodeHighlight.jsを採用
次に試したのはWP CodeHighlight.jsというプラグイン。こちらはほかのプラグインと同じく、WordPressの設定画面からインストールする。
設定としては、CDNにrecommendのcdnjsを選べば、あとはデフォルトのままでいいだろう。こちらのページで、Color Schemeの配色見本を確認できる。数えたらデフォルトも含めて79種類もパターンが用意されており、白黒反転したスタンダードなものから、背景に和紙のような模様がつくBrown Paper、リーガルパッド調の罫線がつくSchool Bookのような変わり種も含まれている。
記事中での指定方法は、
[code]<pre><code class=”C#”>…</code></pre>[/code]
と、prism.jsのときと同じような感じ。<code>タグのクラスで任意のプログラミング言語を指定すればよい。プラグインの設定で有効化すると、
という短縮版（言語自動判別）も使える。場合によっては短縮版でないとレイアウトが崩れるという情報もあったが、自分の場合は特に必要なかった。ただ慣れると短縮版の方が使いやすい。
注意点としては、<pre>タグとソースコードの間に改行や空白を入れると、記事上で妙な余白が生じてしまう。コードの最初と最終行は、<pre>タグに密接させた方がいいようだ。
初心者がはまったポイント
WordPressでコードをハイライトする以前に、なぜか途中で切れて表示されなくなる現象があった。Prism.jsでもWP CodeHighlight.jsでも発生したので、ツール固有の問題ではなさそうだ。
公開時のソースをよく見ると、末尾に</canvas></code></pre>と、謎の</canvas>タグが追加されているのが気になる。この部分を削除しても保存するたびに復活するので、WordPress側で自動補完されている節がある。
埋め込んだコードを確認すると、
[code]fadeCanvas = FadeCanvasObject.AddComponent<Canvas>();[/code]
という部分から下が非表示になってしまうようで、よく見るとこの行に<Canvas>という記述がある。これがHTMLのタグと誤認識されてしまったのだろう。
<>のエスケープ処理が必要
結局、ブログにソースコードを掲載するには、下準備として特殊文字のエスケープ処理が必要だったようだ。普通に考えれば必須なのだが、あまりに基本的なお約束事なので、どの記事でも触れられていなかった。
あるいは、普通は気にしなくても問題ないが、たまたまUnityのC#スクリプトを見せようとして不運にも<canvas>タグが混ざってしまったという状況だろうか。
<を<、>を>に置き換えれば解決するが、1つずつ手作業で書き換えたりエディターで置換するのは面倒なので、ウェブ上の自動変換サービスを利用するといいだろう。今回はこちらの無料ツールを使わせていただいた。
WP CodeHighlight.jsのデフォルト
最終的に、WP CodeHighlight.jsのデフォルトテーマで落ち着いた。はてなブログのシンタックスハイライトより配色が地味で、フォントもMSゴシックみたいで何となくショボい気がする。ただ、予約語が太字で表示されるのは読みやすくてよい。
プラグインの配色はWordPress内の設定で全記事一括変換できるので、気が変わったらほかのカラースキームも試してみたい。PC/スマホの表示でも、特にプラグインの読み込みが遅いという実感はない。
とりあえず2018年時点でWordPressで無難に使えるプラグインの一つとして、WP CodeHighlight.jsは間違いなさそうだ。