Blogger で highlight.js を使ってみた

　このサイトでは，FreeBSD だの OpenLayers だの，コンピュータのプログラム関連のことを書いていることも多い。 そんな時，どうしても必要なのがソースコードの表示である。 つい最近までは，

function() {
    hogehoge;
}

のような表示の仕方をしていた（今でもこの形式のものが多いが…）。

　しかし，この表示だとあまりにプレーンすぎるので，自動的に色つけなどをして表示してくれるものが欲しかった。 候補としては SyntaxHighlighter というのがあるのは知っていた（SyntaxHighlighter を使ってみた ）のだが， 今回 highlight.js というのに挑戦してみた，というお話。

　きっかけはと言うと，前回の投稿にある個人サイトの https: 化である。 highlight.js は https: 化とは直接は関係ないが， https: サイトを作る際に，ページ内で http: プロトコルのサイトからファイルを読み込んでいると「このサイトは安全ではない」と言われる。 その件を Blogger に書いている時に， Blogger サイトはどうなんや？と思い始めたのが一つのきっかけとなっている。 しかし，https: 化と highlight.js はすぐには結びつかないが…。

　そんな時に，ソースコードの表示はやはり highlight させたいなぁ，と思い始めたのだった。 以前「SyntaxHighlighter を使ってみた 」で SyntaxHighlighter に挑戦したが，いまいちうまく働かない部分があったので，その時は諦めてしまっていた。 しかし，今回，ふと「再挑戦」してみようと思った，というのが直接のきっかけである。

　最終的に highlight.js を使うことにしたが，まずは SyntaxHighlighter と highlight.js の比較をしてみたいと思う。

A. SyntaxHighlighter については，（使い方に関しては SyntaxHighlighter を使ってみた を参照のこと）

(1) <pre class="brush:XXXX">...(ソースコード)...</pre> という形式で使う。
(2) 事前に「<」 =>「&lt;」，「>」 =>「&gt;」などの変換が不要である。
(3) 多少，読み込みに時間がかかる（重い）。
(4) ヘッダーで読み込ませるファイルが多い。
(5) コードの中に「&lt;br&gt;」があると改行されてしまうことがある。
(6) 読み込み先サイトが「https:」になっていない。

などがあげられる。

B. highlight.js については，

(1) デフォルトでは，<pre><code class="brush:XXXX">...(ソースコード)...</code></pre> という形式で使う。
　　これに関しては<pre class="brush:XXXX">...(ソースコード)...</pre> という形式に変更可能である。
(2) 事前に「<」 =>「&lt;」，「>」 =>「&gt;」などの変換が必要である。
(3) SyntaxHighlighter に比べると「軽い」（と思う…）。
(4) ヘッダーで読み込ませるファイルが少ない。
(5) コードの中に「&lt;br&gt;」があっても問題なく表示される。
(6) 読み込み先サイトが「https:」になっている。

となる。

　今回も SyntaxHighlighter に再挑戦したみたが，やはり読み込みに時間かかるのと，https: になっていない点と <br> が一部うまく表示できない，などを勘案して highlight.js に挑戦してみようと思った。

　では，具体的に highlight.js の使い方について書こう。 使い方は，highlight.js の使い方(英語)に書いてあるが，より具体的に書いてみよう。

(a) highlight.js のデフォルトの <pre><code class="XXXX"> .. </code></pre> による記載
　web ページのヘッダー部に以下のように記載する。

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

　ここで，最初の行は highlight 表示の css ファイルの読み込みである。 ここでは「version 9.10.0」で，「railscasts.css」というのを読み込んでいる。 基本形は「default.min.css」を読み込めば良いが，どうも気に入らなかったので「railscasts.min.css」にしてみた。 各種の css ファイルを使った際の見栄えに関しては様々なスタイルのデモにサンプルがある。
　２行目が highlight.js の本体の読み込みである。 最後の行は，読み込みと同時にスクリプトを実行して適用するように命令しているものである。

　後は Blogger の本文の中に

<pre><code class="XXXX">
    (ソースコード)
</code></pre>

のように記載する。 ここで「XXXX」は表示させたいプログラム言語等の名称で，Supported Languages に一覧がある。

(b) <pre class="XXXX"> .. </pre> による記載
　上記の記載方法でもいいのだが，<code> がある分だけ手間が増えるし，既に SyntaxHighlighter で記載したページがある場合，コードをすべて書き換えないといけないので大変な手間となる。 そこで，ヘッダー部の記載を

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/railscasts.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js'/>
<script>$(document).ready(function() { $('pre').each(function(i, block) { hljs.highlightBlock(block); }); });</script>

とすると，Blogger の本文内では

<pre class="XXXX">
    (ソースコード)
</pre>

と書くだけで highlight.js を適用することができるようになる。
　内容としては，2行目と3行目はデフォルト形式の1行目，2行目と同じである。 ここでは変更点として1行目で jQuery を読み込ませ，4行目で各 <pre> 内の要素に対して highlight.js を適用するように指示している。これにより SyntaxHighlighter によって書いたものも大きな変更なしに使うことができるようになる。


(c) Blogger への記載
　上記のようにすれば highlight.js を使えるようになるが，Blogger だとどこに記載すればいいかがわかりにくいので，書いておこう。
Blogger でヘッダーに記載をしたければ，

(1) Blogger の編集画面左のメニューの中の「テーマ」を選ぶ。
(2) 「テーマ」の中の「ブログで使用中」の下にある「HTML の編集」を選択

とすれば良い。そこではブログページのソースのテンプレートを変更できる。
今回の場合は，テンプレートの </head> の直前に上記のヘッダー部用のコードを記載した。
下の図の青丸と青矢印が「HTML の編集」を表している。
赤い方は下記の「カスタマイズ」の選択である。

(d) 以前の <pre> スタイルの適用
　また，すでに <pre> に対して css 等でスタイルを指定していた場合，うまくやらないとこれまでのスタイル指定は適用されない。 私の場合は，以下のようにしてみた。

1. Blogger で css ファイルに追加し，<pre> に新しい class 名を付加した。
　方法としては Blogger の編集画面左のメニューの中の
　　　「テーマ」の「ブログで使用中」の下にある「カスタマイズ」→「上級者向け」→「CSS を追加」
で css を追加する。
ここでの設定では，<pre class="pre"> と指定する「pre」class を作ることにした。

pre.pre {
      font-family: Monaco, "Courier New", Courier, monospace;
      font-size: 90%;
      letter-spacing: -0.04em;
      margin: 1px;
      padding: 0.1em 0.4em;
      border: 1px solid #8cacbb;
      color: Black;
      background-color: #FFFFDD;
      overflow: auto;
    }

2. Blogger 本文の中で highlight.js を作用させたくない場合は，以下のように nohighlight と pre を併記する。

<pre class="nohighlight pre"> ...（ソースコード）... </pre>

　上記のようにせずに <pre class="pre"> とだけ記載すると，以前の形式に色がついたものとなり，見た目が変わってしまう。
例えば，すぐ上に書いた css ファイルのを例に取ると，highlight.js を全く適用しない場合（<pre class="nohighlight pre"> ...）は，

pre.pre {
      font-family: Monaco, "Courier New", Courier, monospace;
      font-size: 90%;
      letter-spacing: -0.04em;
      margin: 1px;
      padding: 0.1em 0.4em;
      border: 1px solid #8cacbb;
      color: Black;
      background-color: #FFFFDD;
      overflow: auto;
    }

となるが，nohighlight の class 名がない（<pre class="pre"> ...）の場合は，

pre.pre {
      font-family: Monaco, "Courier New", Courier, monospace;
      font-size: 90%;
      letter-spacing: -0.04em;
      margin: 1px;
      padding: 0.1em 0.4em;
      border: 1px solid #8cacbb;
      color: Black;
      background-color: #FFFFDD;
      overflow: auto;
    }

となってしまう。