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

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の初期化の上で、もう少しコントロールが必要な場合は、使用することができますhighlightBlockし、configure 機能を。これは、あなたがコントロールすることができますどのようなハイライトとしたとき

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ワーカー

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