highlighter.jsの導入

すっかりブログにコードのシンタックスを色分けしてくれるSyntax Highlighter的なものを導入したつもりになっていたのですが、移転のタイミングか何かで忘れていたようです。

パフォーマンスが良いというhighlighter.jsを導入して見ました。

highlighter.jsとは

highlighter.jsは ソースコードをHTML表示するとき、シンタックスを考慮しカラー強調表示するための いわゆるSyntax Highliterと呼ばれるJavaScript ライブラリの一種です。

以下のような特徴があります。

• 対応言語が多い(この種のライブラリでは一番多い!?)
• パレットが豊富
• 軽量で高速

設置方法は、

一般的な言語だけの対応でよければ、CDNを利用して以下のようなコードを貼り付けるだけで、導入できます。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>

私の場合、VimScriptも貼ることが多いので、Getting highlighter.jsのページで対応言語を指定してダウンロードしてきました。

以下は、Ghost上のPurusというテーマを利用している場合の例です。

1. ダウンロードしてパッケージから、highlight.pack.jsをasset/jsフォルダにコピーする
2. ダウンロードしたパッケージのstyleフォルダを、asset/cssフォルダにコピーし名前をhighlighterに変更
3. テーマをZIPし直して、Ghostのテーマにアップロードして置き換える。
4. Code Injectionでコードを追加

Code Injectionでのコード追加は、以下の３行をヘッダー内に追加します。

この例では、配色テーマをAtom One Darkを使用しています。