highlight.js
v11.11.0 - Happy Holidays
Highlight.jsは、JavaScriptで書かれた構文ハイライターです。ブラウザやサーバーで動作します。ほぼすべてのマークアップで動作し、他のフレームワークに依存せず、自動言語検出があります。
コンテンツ
requireimportいつものように、主要なリリースには、ユーザーからのアクションを必要とする可能性のある壊れた変更が含まれています。壊す変更の詳細な要約と、必要なアクションの詳細な要約については、version_11_upgrade.mdをお読みください。
長期的なサポート情報については、security.mdを参照してください。
Webページでhighlight.jsを使用するための最小限は、テーマの1つと一緒にライブラリにリンクし、 highlightAllを呼び出します。
< link rel =" stylesheet " href =" /path/to/styles/default.min.css " >
< script src =" /path/to/highlight.min.js " > </ script >
< script > hljs . highlightAll ( ) ; </ script >これにより、 <pre><code>タグ内のコードを見つけて強調表示します。言語を自動的に検出しようとします。自動検出が機能しない場合、または単に明示的であることを好む場合は、 class属性を使用して手動で言語を指定できます。
< pre > < code class =" language-html " > ... </ code > </ pre > highlight.jsスタイリングを実際に強調表示せずにプレーンテキストに適用するには、 plaintext言語を使用してください。
< pre > < code class =" language-plaintext " > ... </ code > </ pre > コードブロックのハイライトを完全にスキップするには、 nohighlightクラスを使用します。
< pre > < code class =" nohighlight " > ... </ code > </ pre >言語を自動検出し、いくつかのコードを強調表示するための最小限。
// load the library and ALL languages
hljs = require ( 'highlight.js' ) ;
html = hljs . highlightAuto ( '<h1>Hello World!</h1>' ) . value一般的な言語の「一般的な」サブセットのみをロードするには：
hljs = require ( 'highlight.js/lib/common' ) ;特定の言語でコードを強調表示するには、 highlightを使用します。
html = hljs . highlight ( '<h1>Hello World!</h1>' , { language : 'xml' } ) . value requireとimport使用などの詳細については、 highlightまたはhighlightAutoで返された結果オブジェクトの詳細については、APIドキュメントを参照してください。
Highlight.jsは、コアライブラリで180以上の言語をサポートしています。さらに多くの言語をサポートするために、サードパーティの言語定義も利用できます。 supported_languages.mdでサポート言語の完全なリストを見つけることができます。
Highlight.jsの初期化をもう少し制御する必要がある場合は、 highlightElementを使用して機能configureます。これにより、いつ強調するかをより適切に制御できます。
たとえば、Calling highlightAllの大まかな同等物は次のとおりですが、代わりに手動で作業を行っています。
document . addEventListener ( 'DOMContentLoaded' , ( event ) => {
document . querySelectorAll ( 'pre code' ) . forEach ( ( el ) => {
hljs . highlightElement ( el ) ;
} ) ;
} ) ; configureオプションについては、ドキュメントを参照してください。
コードブロックの<pre><code>ラッピングを強くお勧めします。それは非常に意味的であり、ゼロのいじりで箱から出して「ただ機能する」。他のHTML要素（またはコンボ）を使用することは可能ですが、ラインブレイクの保存に特別な注意を払う必要があるかもしれません。
コードブロックのマークアップがDivを使用しているとしましょう。
< div class =' code ' > ... </ div >そのようなブロックを手動で強調表示するには：
// first, find all the div.code blocks
document . querySelectorAll ( 'div.code' ) . forEach ( el => {
// then highlight each
hljs . highlightElement ( el ) ;
} ) ;ラインブレイクを保持するタグ（ preなど）を使用しないと、それらを保存するために追加のCSSが必要です。プラグインを使用して、プロセス後のラインブレークを事前およびポストプロセスすることもできますが、 CSSを使用することをお勧めします。
CSSを使用してdiv内のラインブレイクを保存するには：
div . code {
white-space : pre;
}HighlightJs/Vue-Pluginを参照してください。Highlight.jsでうまく機能するシンプルなVueプラグインを参照してください。
アクション中のvue-pluginの例：
< div id =" app " >
<!-- bind to a data property named `code` -->
< highlightjs autodetect :code =" code " />
<!-- or literal code works as well -->
< highlightjs language =' javascript ' code =" var x = 5; " />
</ div >Webワーカー内でハイライトを実行して、非常に大きなコードのチャンクを処理しながら、ブラウザウィンドウをフリーズしないようにすることができます。
メインスクリプトで：
addEventListener ( 'load' , ( ) => {
const code = document . querySelector ( '#code' ) ;
const worker = new Worker ( 'worker.js' ) ;
worker . onmessage = ( event ) => { code . innerHTML = event . data ; }
worker . postMessage ( code . textContent ) ;
} ) ;in worker.js：
onmessage = ( event ) => {
importScripts ( '<path>/highlight.min.js' ) ;
const result = self . hljs . highlightAuto ( event . data ) ;
postMessage ( result . value ) ;
} ; まず、 npmまたはyarnを介してライブラリをインストールする可能性があります。ライブラリの取得を参照してください。
requireトップレベルのライブラリを必要とすると、すべての言語がロードされます。
// require the highlight.js library, including all languages
const hljs = require ( './highlight.js' ) ;
const highlightedCode = hljs . highlightAuto ( '<span>Hello World!</span>' ) . valueフットプリントが小さい場合は、一般的な言語のサブセット（デフォルトのWebビルドに使用される同じセット）をロードします。
const hljs = require ( 'highlight.js/lib/common' ) ;最小のフットプリントの場合、必要な言語のみをロードします。
const hljs = require ( 'highlight.js/lib/core' ) ;
hljs . registerLanguage ( 'xml' , require ( 'highlight.js/lib/languages/xml' ) ) ;
const highlightedCode = hljs . highlight ( '<span>Hello World!</span>' , { language : 'xml' } ) . valueimportデフォルトのインポートはすべての言語を登録します：
import hljs from 'highlight.js' ;ライブラリのみをインポートし、必要な言語を登録する方が効率的です。
import hljs from 'highlight.js/lib/core' ;
import javascript from 'highlight.js/lib/languages/javascript' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;ビルドツールがCSSのインポートを処理する場合は、テーマをモジュールとして直接インポートすることもできます。
import hljs from 'highlight.js' ;
import 'highlight.js/styles/github.css' ;注：今のところ、 highlight.jsの代わりに@highlightjs/cdn-assetsパッケージをインストールする必要があります。事前に作成されたCDNアセットのダウンロードを参照してください
ライブラリをインポートし、必要な言語のみを登録するには：
import hljs from './assets/js/@highlightjs/cdn-assets/es/core.js' ;
import javascript from './assets/js/@highlightjs/cdn-assets/es/languages/javascript.min.js' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;ライブラリをインポートし、すべての言語を登録するには：
import hljs from './assets/js/@highlightjs/cdn-assets/es/highlight.js' ;注：これらのファイルへのパスは、プロジェクトまたはサイト内にインストール/コピーした場所によって異なります。上記のパスは単なる例です。
importmapを使用して、ノードと同様の方法でインポートすることもできます。
< script type =" importmap " >
{
"imports" : {
"@highlightjs" : "./assets/js/@highlightjs/cdn-assets/es/"
}
}
</ script > HTMLで上記のコードを使用します。その後、JavaScriptは、 importmapから指名されたキーを使用してインポートできます。たとえば、この場合の@highlightjs ：
import hljs from '@highlightjs/core.js' ;
import javascript from '@highlightjs/languages/javascript.min.js' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;注：私たち自身の事前に構築されたES6モジュールCDNリソースなど、完全に静的なURLから直接インポートすることもできます。特定の例については、CDN経由でフェッチを参照してください。
Highlight.jsは、ホスト、またはカスタムビルド、ブラウザスクリプトとして、またはサーバーモジュールとして入手できます。すぐに箱から出して、ブラウザスクリプトはAMDとCommonJSの両方をサポートしているため、SourceからビルドすることなくRequireJsまたはbrowserifyを使用できる場合。サーバーモジュールは、browserifyでも完全に正常に動作しますが、サーバー向けのものではなく、ブラウザに固有のビルドを使用するオプションがあります。
GitHubに直接リンクしないでください。図書館はソースから直接動作することになっていないため、建物が必要です。事前にパッケージ化されたオプションが機能しない場合は、建物の文書を参照してください。
アーモンドで。モジュールに名前を付けるには、オプティマイザーを使用する必要があります。例えば：
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js多くの一般的な言語にバンドルされたHighlight.jsの事前に構築されたバージョンは、いくつかの一般的なCDNによってホストされています。 CDNを介してHighlight.jsを使用する場合、追加のセキュリティにSubResourceの整合性を使用できます。詳細については、Digests.mdを参照してください。
< link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/default.min.css " >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/highlight.min.js " > </ script >
<!-- and it's easy to individually load additional languages -->
< script src =" https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/languages/go.min.js " > </ script > < link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/dark.min.css " >
< script type =" module " >
import hljs from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/highlight.min.js' ;
// and it's easy to individually load additional languages
import go from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/languages/go.min.js' ;
hljs . registerLanguage ( 'go' , go ) ;
</ script > < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css " >
< script src =" https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js " > </ script >
<!-- and it's easy to individually load additional languages -->
< script src =" https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/languages/go.min.js " > </ script > < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css " >
< script type =" module " >
import hljs from 'https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/es/highlight.min.js' ;
// and it's easy to individually load additional languages
import go from 'https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/es/languages/go.min.js' ;
hljs . registerLanguage ( 'go' , go ) ;
</ script > < link rel =" stylesheet " href =" https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css " >
< script src =" https://unpkg.com/@highlightjs/[email protected]/highlight.min.js " > </ script >
<!-- and it's easy to individually load additional languages -->
< script src =" https://unpkg.com/@highlightjs/[email protected]/languages/go.min.js " > </ script > < link rel =" stylesheet " href =" https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css " >
< script type =" module " >
import hljs from 'https://unpkg.com/@highlightjs/[email protected]/es/highlight.min.js' ;
// and it's easy to individually load & register additional languages
import go from 'https://unpkg.com/@highlightjs/[email protected]/es/languages/go.min.js' ;
hljs . registerLanguage ( 'go' , go ) ;
</ script >注： CDN-Hosted highlight.min.jsパッケージは、すべての言語をバンドルしません。それは非常に大きいでしょう。ダウンロードページでデフォルトでバンドルする「一般的な」言語のリストを見つけることができます。
また、独自のCDNを介して提供するのと同じ資産をダウンロードして自己ホストすることもできます。これらのビルドをCDNリリースGitHubリポジトリに公開します。 curlなどで個々のファイルをCDNエンドポイントから簡単に引き出すことができます。 highlight.min.jsと単一のCSSファイルのみが必要だと言った場合。
また、 npmまたはyarnを介してアセットを引くとビルドプロセスが簡単になる場合、NPMパッケージ @HighlightJS/CDN-Assetsもあります。
ダウンロードページは、希望する言語のみを含むカスタムシングルファイルのマニファイバンドルをすばやく生成できます。
注：ソースからの構築は、Webサイトのダウンロードよりもわずかに小さなビルドを生成できます。
サポートされているすべての言語を含む当社のNPMパッケージは、NPMまたはYARNでインストールできます。
npm install highlight.js
# or
yarn add highlight.jsまた、ブラウザにインポートできるES6モジュールを含む事前に構築されたCDNアセットを含むHighlightJS/CDNアセット @HighlightJS/CDNアセットもあります。
npm install @highlightjs/cdn-assets
# or
yarn add @highlightjs/cdn-assetsまたは、ソースからNPMパッケージを構築できます。
現在のソースコードは、常にGitHubで利用できます。
node tools/build.js -t node
node tools/build.js -t browser :common
node tools/build.js -t cdn :common詳細については、建物のドキュメントをご覧ください。
Highlight.jsは、すべての最新のブラウザで動作し、現在サポートされているnode.jsバージョンで動作します。コアライブラリに貢献するには、次のソフトウェアが必要です。
Highlight.jsはBSDライセンスの下でリリースされます。詳細については、ライセンスファイルを参照してください。
図書館の公式ウェブサイトはhttps://highlightjs.org/です。
APIおよびその他のトピックのさらに詳細なドキュメントは、http：//highlightjs.readthedocs.io/にあります。
コアチームと貢献者のリストは、Contributors.mdファイルにあります。
