これまでシンタックスハイライトには 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でマークアップするシンタックスハイライト職人なのですが、ぜひ彼にも使ってほしいと思います。