シンタックスハイライトの実装はhighlight.jsを使うといい感じになります

記事内でHTMLなどのソースコードの表示をするときには、シンタックスハイライトでコードに色をつけると見やすくなります。シンタックスハイライトの実装はいくつか方法がありますが、JavaScriptなどのライブラリを使うか、wordpressの場合プラグインを導入することによって実装できます。
今回はこのブログでも使っている「highlight.js」のオススメポイントや使い方などを紹介します。

highlight.jsってなに?

シンタックスハイライトを実現する軽量JavaScriptライブラリです。2015年11月現在137の言語に対応しているなど、他のライブラリと比べても対応言語が多いのが特徴です。
また、コードの見た目を変えるスタイル(テーマ)も65種類と豊富に用意されているので、自分好みの見た目にすることができます。

58_01

そのほかにも、jQueryに依存していないライブラリなのでwordpress以外の様々な環境でも問題なく使えます。

highlight.js公式サイト
https://highlightjs.org/

highlight.jsの使い方

highlight.jsの使い方は簡単です。公式サイトよりjsファイルを落としてきて自分のサーバーに設置する方法もありますが、今回はもっと簡単にCDNにホストされているファイルを読み込んで使ってみます。htmlの内に以下のコードを貼り付けます。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

その後、記事内で<pre><code>…</code></pre>で囲ってやれば、囲った部分がハイライトされ色がつきます。

好みのスタイルに変更したいとき

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/default.min.css">
で読んでいるcssファイルを好みのものに変更します。
公式サイトではdemoが用意されているので、それを見ながら自分の好みのスタイルを選び、上記コードのdefaultの部分を好みのスタイル名に変更すれば変更できます。
例えばこのブログで使っているテーマは「Monokai Sublime」ですが、その場合は
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/monokai_sublime.min.css">
になります。全て小文字なのと、テーマ名のスペースはアンダーバーになっている事に注意すれば大丈夫です。

公式デモ
https://highlightjs.org/static/demo/

注意点

コードを貼り付ける際は、HTMLエスケープする必要があります。例えばHTMLのタグを表示する場合、<>をエスケープしないと表示されませんので注意してください。