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

Highlight.js

ビルドステータス

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

入門

Webページでhighlight.jsを使用するための最低限のことは、スタイルの1つとともにライブラリにリンクし、 initHighlightingOnLoadを呼び出すこと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に無効nohighlightするには、 nohighlightクラスnohighlight使用しnohighlight

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

カスタム初期化

Highlight.jsの初期化をもう少し制御する必要がある場合は、 highlightBlockconfigure関数をconfigureます。これにより、いつ強調表示するを制御できます。

jQueryを使用してinitHighlightingOnLoadを呼び出すのと同等の方法をinitHighlightingOnLoadます。

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

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

1 2 3 4 5
hljs.configure({useBR: true}); $('div.code').each(function(i, block) { hljs.highlightBlock(block); });

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

Webワーカー

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); }

ライブラリの取得

ハイライト.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>

アーモンドの場合。オプティマイザーを使用してモジュールに名前を付ける必要があります。例:

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