Bloggerでhighlight.jsを使う。

BloggerでSyntaxHighlighterを使う。で SyntaxHighlighter を使ってみているんですが、どうも重たいようなので、軽いと評判のhighlight.jsに切り替えてみようかな、と思いました。

Usageを参照するといろいろと使い方が書いてあり、Getting highlight.jsに詳細の説明があります。CDNJS からホスティングされているようなので、このままいけるかな。
CDNJS を使う場合には、以下のコードを </head> タグの前に入れてやればいいようです。

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

実際には CDNJS からスクリプトタグとしてコピー＆ペーストしていく形になります。
必要なのは、CDNJSのリストで一番上にある highlight.min.js。それから languages にある言語設定ファイル、下の方にある styles のスタイルファイルになります。
スタイルファイルのデモは、highlight.js demoにあるので、好きなスタイルを選べばよいでしょう。
最後に initHighlightingOnLoad() を呼び出します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js" integrity="sha256-aYTdUrn6Ow1DDgh5JTc3aDGnnju48y/1c8s1dgkYPQ8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/tomorrow-night-eighties.min.css" integrity="sha256-VeRq5fe7DQWoI4BTnuxQBub1iKtAtH4J69kUO3fD288=" crossorigin="anonymous" />
<script>hljs.initHighlightingOnLoad();</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/languages/bash.min.js" integrity="sha256-zXrlim8wsIvcEFjsD3THiAfTvtPZifqx8q0rxegiWQc=" crossorigin="anonymous"></script>

こんな感じで用意しておいて、これを使います。"integrity" のところは、万が一 CDNJS で改竄された場合にセキュリティを確保するために入れています。
これでできるかな？

以下に highlight.js の pre でコードを載せてみます。

#include <stdio.h>
void main(void) {
    printf("Hello, World!\n");
}

どうやらちゃんと機能しているようです。
ただ、行番号についてはポリシーとしてサポートしていない、ということが説明されていました。

まとめてみると、

• Crayon Syntax Highlighter
  ツールバーが出てコピーコードなどが利用できる。機能がリッチ。でも重たい。
• SyntaxHighlighter
  ツールバーが出ない。コピーはマウスでセレクト＆コピー。行番号が使える。
• highlight.js
  シンプルでとても軽い。でも行番号もツールバーも出ない。

という感じでしょうか。