Getting Started

highlight.jsを使う最も簡単な方法は、 ライブラリと、スタイルを読み込み、.initHighlightingOnLoad()メソッドを呼び出します。

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

highlight.jsは<pre><code>タグを探し出し、 その中のコードをハイライトします。 該当言語は、自動で検出するよう試みますが、 自動検出がうまく動かない場合は、class属性で設定することができます。

<pre><code class="html">...</code></pre>

サポートされている言語は、クラスリファレンスで確認することができます。 クラスにはlanguage-または、lang-というプレフィックスを付けることができます。

ハイライトを無効にするには、nohighlightクラスを使用します。

<pre><code class="nohighlight">...</code></pre>

カスタム初期化

もしhighlight.jsの初期化を制御したい場合、.configure()メソッドと、.highlightBlock()メソッドを使います。 これにより、いつ、どの項目をハイライトするかを制御することができます。

ここでは、jQueryを使って、.initHighlightingOnLoad()メソッドと同等の呼び出す方法を示します。

$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

<pre><code>の代わりに、 任意のタグを使うこともできます。 もし改行を表示しないタグ(preタグ以外)を使用する場合には、 <br>タグを使うよう設定する必要があります。

hljs.configure({useBR: true});

$('div.code').each(function(i, block) {
  hljs.highlightBlock(block);
});

その他のオプションについては、.configure()を参照して下さい。

デモ

pre > codeタグではなく、 spanタグを使ってソースのハイライトを表示しています。

JavaScript

hljs.configure({
  useBR: true,        // 改行にbrタグを使用
  tabReplace: '　　', // タブを'　　'全角スペース2つに変更
});
var code = document.querySelectorAll('span.code');
for (var i = 0; i < code.length; i++) {
  hljs.highlightBlock(code[i]);
}

HTML

<span class="code">
hljs.configure({<br>
  useBR: true,        // 改行にbrタグを使用<br>
  tabReplace: '　　', // タブを全角スペース2つに変更<br>
});<br>
var code = document.querySelectorAll('span.code');<br>
for (var i = 0; i < code.length; i++) {<br>
  hljs.highlightBlock(code[i]);<br>
}
</span>

WebWorker

WebWorkerを使うことで、とても大きなソースコードであっても ブラウザをフリーズさせることなく、ソースコードをハイライトすることができます。

メイン処理

addEventListener('load', function() {
  var code = document.querySelector('#code');
  var worker = new Worker('worker.js');
  worker.onmessage = function(event) { code.innerHTML = event.data; }
  worker.postMessage(code.textContent);
})

worker.js

onmessage = function(event) {
  importScripts('<path>/highlight.pack.js');
  var result = self.hljs.highlightAuto(event.data);
  postMessage(result.value);
}

highlight.jsの取得について

highlight.jsは、ホスティング、カスタムビルド、ブラウザスクリプト、サーバモジュールが用意されています。 AMD、CommonJSからすぐに利用することができるので、ソースをビルドする必要はなく、 そのままRequireJSや、Browserifyを使うことができます。 サーバモジュールでもBrowserifyで完璧に動作しますが、 サーバ用ではない、ブラウザ用のビルドを使用するオプションがあります。 全てのオプションはダウンロードページにあります。

GitHubページにはリンクしないでください。 highlight.jsのソースはそのままでは動かないので、ビルドしなければなりません。 もし、パッケージ化されたオプションで想定どおり動作しない場合、ビルドについてを参照してください。

CDNホストのパッケージには全ての言語が含まれているわけではありません。 全ての言語を網羅すると、ライブラリのサイズが大きくなりすぎてしまいます。 必要な言語がCommonに無い場合は、手動で追加することができます。

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script>

Almond.jsの場合。 モジュールに名前を付けるために、オプティマイザを使ってください。 例えば以下のように指定します。

$ r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js