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

Highlight.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>

カスタム初期化

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

initHighlightingOnLoadjQuery使用して呼び出すのと同等の方法を次に示します。

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 ワーカー内で強調表示を実行して、非常に大きなコード チャンクを処理しているときにブラウザー ウィンドウがフリーズしないようにすることができます。

あなたのメインスクリプトで:

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の両方をサポートします.ソースからのビルド. サーバー モジュールは 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ファイルにリストされてます。