シンタックスハイライトをgoogle code prettifyからhighlight.jsに変えた

公開

更新

これまでシンタックスハイライトには Google code prettify を使ってたのですが、テーマもイイ感じのものがなく、言語の判別の精度もいまひとつだったので highlight.js に変更してみました。

JavaScriptとCSSを設置すると、自動的に<pre><code></code></pre>の中身をよしなにしてくれるので大変楽です。

テーマも色々とあって、デモページで試せます。今回は見慣れてる人も多かろうということでGithubのテーマにしてみました。

下記サンプル

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>

自サイトでホストする以外に上記のようにCDNでも配信してるのですが、SassなどのメタCSS言語は、標準で入ってないので、Getting highlight.jsページのCustom packege > other でSCSSなりLessなりにチェックを入れてカスタムビルドしたものをダウンロードする必要があります。


隣の席の同僚が自らspanでマークアップするシンタックスハイライト職人なのですが、ぜひ彼にも使ってほしいと思います。