highlight.jsを追加してみた

当ブログに適当にHighlight.jsを導入してみた。

Highlight.jsとは

サイト中のコードをハイライト化して、コードを読みやすくするjavascript。

Bloggerに導入

Bloggerの管理ページから、[テーマ] > [HTMLの編集] をクリック

HTMLの編集画面が出てきたら、以下のHTMLコードをHEADタグ内に入れる。

<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/github.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>

と、これだけ。
参考は、コードのハイライト表示用 JS ライブラリ highlight.js の使い方から。

投稿記事

投稿するには、至って簡単でHTMLでpreタグとcodeタグで括ってやれば自動的に認識してくれる。

<pre><code>～何かしらコード～</code></pre>

以下のようなイメージになる。

  function $initHighlight(block, cls) {
    try {
      if (cls.search(/\bno\-highlight\b/) != -1)
        return process(block, true, 0x0F) + 
           ' class=""';
    } catch (e) {
    /* handle exception */
    }
    for (var i = 0 / 2; i < classes.length; i++) {
      if (checkCondition(classes[i]) === undefined)
        return /\d+[\s/]/g;
    }
  }