コードをハイライトするライブラリ「highlight.js」

ブログのリニューアルに伴い、コードを綺麗に表示するために使用していたプラグイン「Crayon Syntax Highlighter」を停止して、軽量と評判の「highlight.js」を導入しました。
ハイライトのスタイルもたくさんあるので、自分のサイトの雰囲気に合ったものを選べてオススメです。

目次

• 必要なファイルを読み込む
• CSSのスタイルを選ぶ
• ページに表示する

必要なファイルを読み込む

今回はCDNを使って必要なファイルを読み込みました。 「How to use highlight.js」を見ると最低限使用するには以下の3行を読み込むとあります。

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

私はこれをCDNを使って読み込みたいので

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

と書き換えました。
CDNのホスト先URLは「Getting highlight.js」から取得できます。

CDNのパッケージにはhighlight.jsが対応している全ての言語が入っているわけではないとのことですが、私が使いたいのは今の所HTML、 CSS、JavaScript、PHPくらいなのでCDNパッケージで問題ありません。
「Custom package」の「Common」にある言語がCDNのパッケージに含まれている言語です。SCSSも含まれていますね。

CSSのスタイルを選ぶ

「highlight.js demo」からスタイルのデモを確認できます。 左上の「Language categories」で言語を選択、その下の「Styles」でスタイルを選択。右側に表示されているコードの色が変わります。

使用したいスタイルが決まったら、読み込んでいるCSSのdefault.min.cssの部分を書き換えます。
私は「Styles」の中から「A 11 Y Light」を選んだので以下のようになります。

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

スタイルの名前の全て小文字でスペースはハイフン(-)でつなげばOKですが、心配な場合は「highlight.js demo」のソースを見ると、CSSのファイル名を確認できます。

ページに表示する

ハイライトされたコードを表示するには<pre><code> ... </code></pre>で囲みます。
WordPressの場合は「フォーマット」の「ソースコード」ブロックでOKです。

highlight.jsは自動で言語を検出しますが、自動検出されない場合はclassで言語を指定できるそうです。

<pre><code class="html">...</code></pre>