シンタックスハイライト Google code-prettifyの導入でコードを綺麗に表示する
ブログの記事中にプログラムやhtmlのソースコードをシンタックスハイライト（コード表示をきれいに色分け）したい場合、今はWordPressのプラグインからJavaScriptのライブラリまで簡単に導入できるものが数多く存在しています。その中でも1番シンプルで軽量、簡単に導入できる「Google code-prettify」をご紹介します。
Google code-prettifyの導入
オープンソースで開発されているシンタックスハイライト機能を取り入れることができます。
当ブログの構文ハイライトもこのGoogle code-prettifyを使用しています。
① CDNからJavaScriptファイルの読み込み
GitHubで配布されている下記コードをそのままコピーし、＜head＞内に読み込みます。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
ちなみに、run_prettify.jsの後に?skin=パラメータを追加すると、好きな色のハイライトを選ぶことができます。
» こちらのスタイルギャラリーから好きなパターンを選びます。
たとえば「Sons-Of-Obsidian」のスキンを適用したい場合は、「?skin=sons-of-obsidian」と追記します。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian"></script>
② HTML側の記述
構文ハイライトを表示させる部分の記述
<pre class="prettyprint linenums">
//ソースコードをこちらに記述
</pre>
preタグにprettyprintクラスを付与します。左端に行数を表示させたい場合は、加えてlinenumsクラスを追加します。
また、codeタグを間に入れることもできます。
※ 注意）ソースコード部分はエスケープ文字（特殊文字）への変換が必要
＜（不等号）や”（ダブルクオーテーション）などの特殊文字はそのまま記述するとHTMLの開始文字などと誤認識されてしまうため、正常にハイライトされなくなります。
» HTMLの特殊文字をエスケープする変換ツール – PEKO STEP
» HTMLエンコーダー(特殊文字エスケープツール)
そこで、上記の外部で公開されている特殊文字をエスケープするWEBサービスなどを利用し、まとめて変換してpreタグ内に記述します。
<pre class="prettyprint">
<code>
＆lt;script src=＆quot;https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js＆quot;＆gt;＆lt;/script＆gt;
</code>
</pre>
このように書きます。（※こちらのソースはテスト表示用なのでコピーしないで下さい。＆の文字が全角になっています。）
まとめ
オープンソースで開発が続けられているこのシンタックスハイライト機能「Google code-prettify」は、とても軽量なjavascriptライブラリです。導入方法がシンプル・簡単で、デザインの自由度は少ないですがスキンのパターンもあらかじめいくつか用意されており、もし物足りなければスタイルシートも編集することができるので、ここから色々カスタマイズしてみてください。
参考リンクなど
» GitHub code-prettify/docs/getting_started.md
» Google code-prettifyの使い方（2017年6月現在）
» Google code-prettifyのBloggerへの導入方法 – 灰色スズメの足跡