素晴らしいコミュニティモジュール

ハイライト.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ファイルにリストされています。