highlight.js導入

2016/04/16

blogに貼り付けたソースコードのシンタックスハイライトをするためにhighlight.jsを導入しました。

Hugoの公式サイトで紹介されていたのと、ネットで「軽い」という評判を多く見かけたのがポイント。凝った機能よりも軽さ重視です。

とりあえず使いたい!というときは、headタグ内に3行追加するだけ。CDNでホストしてくれているのでダウンロードする必要すらありません。

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

highlight.js自体は152もの言語に対応していますが、CDNにホストされているのは主要22言語に対応したバージョンです。 他の言語をハイライトしたい場合はGetting highlight.jsで対象言語を選択してダウンロードしましょう。

テーマが豊富なのも嬉しいところ。highlight.js demoのライブデモで実際の配色を見ながらテーマを選べます。

記事を書くときのmarkdownもシンプル。fenced code blockで囲っておくだけ。 言語の自動判別機能があるのでそれっぽく色をつけてくれます。自動判別が誤判定しそうなときは言語名を明示すればOK。

``` java
public static void main(String args[]) {
	// do something
}
```

と書いておけば

public static void main(String args[]) {
	// do something
}

という風にカラーリングされます。

細かなカスタマイズをしたい方はHow to use highlight.jsをご参照あれ。基本的にはデフォルトで問題ないとは思います。本blogはタブ幅を半角空白4つにした以外はデフォルトですね。テーマはなんとなくandroidstudioをチョイス。気が変わったら変えちゃうかも。




関連(するかもしれない)記事


おススメ