Bloggerでhighlight.jsを使う

• • • highlight.jsの実装方法
    • シンタックスハイライトの背景色を変える方法
    • highlight.jsの使用方法
    • Bloggerのテンプレート次第ではうまく機能しないかも

Bloggerにシンタックスハイライト機能を実装する。
簡単で軽量と評判だったhighlight.jsを使おうとして、いきなりハマってしまったのでメモ。

highlight.jsの実装方法

---

実装自体は非常に簡単。
公式ページのUsageを見ると使用方法が書いてある。
実装に必要なコードはこの3行。
今回はCDN経由で使用したいので、以下の黄色で囲ってある2行を変更する。

公式ページのGet versionから以下の2行コード（今回はcdnjsを使用）をコピーし、
先ほどの2行のコードを変更すればいい。

コードを貼り付ける場所はテンプレートのHTMLの編集をクリック。

そして、</head>の直前に貼り付ければいいでしょう。

シンタックスハイライトの背景色を変える方法

---

これも簡単で、先ほどコピペしたCSSのコードのdefaultという箇所を変更するだけ。
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/default.min.css' rel='stylesheet'/>

公式サイトにデモページがあるので、Styleを変更してみて好きなものを選べばいい。
railscastsにしたければ、以下のようにする。
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/railcasts.min.css' rel='stylesheet'/>

highlight.jsの使用方法

---

使い方はシンタックスハイライトしたいコードを<pre><code>と</code></pre>の間に書くだけ。
基本的には自動で言語を判別してくれるが、<pre><code class="HTML">...</code></pre>のように指定することもできる。

＜例＞
<pre><code class="HTML">
<p>hello world</p>
</code></pre>

表示結果はこうなる。

hello world

Bloggerのテンプレート次第ではうまく機能しないかも

---

以上のようにとても簡単なのだが、最初なぜかシンタックスハイライトされなくてハマった。
たぶんだが、Bloggerのテンプレートを「動的ビュー」にしていたからだと思う。テンプレートを「シンプル」に変えたらうまくいったとともにこんなことでハマってたのかと落胆した。

うまくいかない場合は、テンプレートを変えてみるものいいかもしれませんよ。

Written with StackEdit.