お手軽シンタックスハイライト

本ブログで使うシンタックスハイライトのスクリプトを探していました。
よく見かける物は高機能だが使いにくいという物ばかりという印象を感じていたので、マイナー探しでしょうか。（特定ブラウザで問題あったり、コピーがまともにできなかったり面倒だったり）

シンプルで手軽な物を探した結果、「highlight.js」を採用しました。
あまり見かけませんが、けっこう評判が高い感じです。

サンプル

function inherit(parent, obj) {
  var result = {};
  for (var key in parent)
    result[key] = parent[key];
  if (obj)
    for (var key in obj)
      result[key] = obj[key];
  return result;
};

・良い点
手軽。　なんといっても手軽軽量。めんどくさがり屋にうってつけです。
対応現言語が大量で、言語指定しなくても自動認識し、ごちゃまぜにしても問題なし。とても賢く動きます。
なので、コードをはりつけるのが大変楽です。

・悪い点
行番号がつけられない？何行目という解説をする時に不便そうですね。


本家マニュアルが少々分りにくいと思いますので、解説いたします。
簡易マニュアル
詳細マニュアル

■基本的な使い方

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

上記が全てデフォルトで動作させるための最小設定です。
cssやjsファイルは、カスタムダウンロードを行わなければリンクするだけです。

initHighlightingOnLoadは、ブラウザの表示が完了したらシンタックスハイライトを実行します。
シンタックスハイライトの対象ブロックは、デフォルトでは「<pre><code></code></pre>」となります。
ちょっとこれは面倒ですね。普通は「<pre></pre>」で充分だと思います。
なので動作指定を行いましょう。

■<pre>要素を対象にする方法

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/default.min.css' rel='stylesheet'/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js'/>
<script>
  $(function() {
    $('pre').each(function(i, block) {
      hljs.highlightBlock(block);
    });
  });
</script>

jQueryを使う場合は、これで完了となります。
ブラウザの読み込みが終わったら、全 pre 要素にシンタックスハイライトを適用します。
initHighlightingOnLoadでやっている事をjQueryで書き直しただけですね。