犬ターネット

highlight.js っていうコードハイライトしてくれるjavascriptライブラリについて。

使い方は、まず <pre><code>～</code></pre> 内にコード書いて、

<pre><code>$(function(){
	"use strict";
	$.ajax( "./api", {
		method : "POST",
		data : { q : "twitter", v : "1.0" },
		dataType : "json"
	} )
	.done(function( json ){
		console.log( json );
	});
});</code></pre>

css と highlight.js を読み込んで、hljs.initHighlightingOnLoad() を実行するだけ。

<link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/default.min.css">
<script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

あとはライブラリがコードを自動判別してハイライトしてくれる。実際にハイライトした結果↓

言語指定もできる。例えば java でハイライトしたい場合は <pre><code class="java">～</code></pre> とする。

タブ幅をスペース2個にしたい場合は hljs.configure({ tabReplace: " " }); を先に実行する。

導入も簡単で見た目もシンプルだから結構気に入っている。

その他使い方は http://highlightjs.org/usage/ を参照。