ハイライト.js

Highlight.js は JavaScript で書かれた構文ハイライターです。サーバーだけでなくブラウザでも動作します。ほぼすべてのマークアップで動作し、フレームワークに依存せず、自動言語検出機能を備えています。

はじめる

Web ページで highlight.js を使用するための最低限の作業は、スタイルの 1 つとともにライブラリにリンクし、以下を呼び出すことです initHighlightingOnLoad。

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

これにより、タグ内のコードが検索されて強調表示され<pre><code>、言語が自動的に検出されます。自動検出が機能しない場合は、属性で言語を指定できますclass。

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

サポートされている言語クラスのリストは、クラスリファレンスlanguage-で入手できます。クラスには、またはのいずれかのプレフィックスを付けることもできますlang-。

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

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

カスタム初期化

highlightBlockハイライト.js の初期化をもう少し制御する必要がある場合は、および関数を使用できます。これにより、何をいつハイライトするかconfigure を制御できます。

jQuery を使用した呼び出しと同等の方法を次に示しますinitHighlightingOnLoad。

1
2
3
4
5
$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

コードをマークアップする代わりに任意のタグを使用できます<pre><code>。改行を保持するコンテナを使用しない場合は、タグを使用するようにhighlight.jsを構成する必要があります<br>。

1
2
3
4
5
hljs.configure({useBR: true});

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

他のオプションについては、のドキュメントを参照してくださいconfigure。

ウェブワーカー

Web ワーカー内で強調表示を実行すると、非常に大きなコードの塊を処理しているときにブラウザーウィンドウがフリーズするのを避けることができます。

メインスクリプトでは次のようになります。

1
2
3
4
5
6
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 内:

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

ライブラリの入手

ホストされた、またはカスタムビルドのブラウザスクリプトとして、またはサーバーモジュールとして、highlight.js を入手できます。すぐに使えるブラウザスクリプトは、AMD と CommonJS の両方をサポートしているため、必要に応じて、必要に応じて、RequireJS または Browserify を使用できます。ソースからビルドします。サーバーモジュールも Browserify で完全に動作しますが、サーバー向けのものではなく、ブラウザーに固有のビルドを使用するオプションがあります。すべてのオプションについては、ダウンロードページにアクセスしてください。

GitHub に直接リンクしないでください。ライブラリはソースから直接動作するものではなく、ビルドが必要です。事前にパッケージ化されたオプションがどれも機能しない場合は、ビルドドキュメントを参照してください。

CDN でホストされているパッケージにはすべての言語が含まれていません。そうでないと、サイズが大きすぎます。必要な言語が「共通」セクションに表示されない場合は、手動で追加できます。

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

Almond では、オプティマイザを使用してモジュールに名前を付ける必要があります。例:

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

ライセンス

Highlight.js は BSD ライセンスに基づいてリリースされています。詳細については、 LICENSEファイルを参照してください。

リンク

ライブラリの公式サイトはhttps://highlightjs.org/にあります。

API およびその他のトピックに関するさらに詳細なドキュメントは、 http://highlightjs.readthedocs.io/にあります。

著者と寄稿者はAUTHORS.en.txtファイルにリストされています。

開発ガイド

基本モジュール

組み込みオブジェクト

コミュニティモジュール