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.jsasset/jsフォルダにコピーする
  2. ダウンロードしたパッケージのstyleフォルダを、asset/cssフォルダにコピーし名前をhighlighterに変更
  3. テーマをZIPし直して、Ghostのテーマにアップロードして置き換える。
  4. Code Injectionでコードを追加

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

html:default.hbs <link rel="stylesheet" href="/assets/css/highlighter/atom-one-dark.css"> <script src="/assets/js/highlight.pack.js"></script> <script>hljs.initHighlightingOnLoad();</script>

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