Prism

Prism

ソース
作者
  • Lea Verou <https://lea.verou.me>
ライセンス
  • MIT

Prism: 軽量、堅牢、エレガントな構文強調表示

名前空間

フック
言語

メンバー

(static) disableWorkerMessageHandler :boolean

ソース
既定値
  • false

既定では、PrismがWebワーカーにある場合は自分自身で作成したワーカーにあると想定され、 addEventListenerを使用して親インスタンスと通信します。 しかし、独自にワーカーでPrismを手動で使用している場合は、Prismがこれを実行しないようにする必要があります。

この値をtrueに設定すると、Prismは独自のリスナーをワーカーに追加しません。

Prismを実行する前に、この値を変更する必要があります。これを行うには、次のようにPrismスクリプトを読み込む前に空のPrismオブジェクトをグローバルスコープに追加できます。

window.Prism = window.Prism || {};
Prism.disableWorkerMessageHandler = true;
// Load Prism's script
型
  • boolean

(static) manual :boolean

ソース
既定値
  • false

既定では、Prismはページの読み込みが完了した後に現在のページにあるすべてのコード要素を強調表示しようとします(Prism.highlightAllを呼び出す)。たとえば、追加の言語またはプラグインを非同期的に自分でロードする場合は問題になる可能性があります。

この値をtrueに設定すると、Prismはページのすべてのコード要素を自動的に強調表示しません。

自動強調表示が開始する前に、この値を変更する必要があります。これを行うには、次のようにPrismスクリプトを読み込む前に空のPrismオブジェクトをグローバルスコープに追加できます。

window.Prism = window.Prism || {};
Prism.manual = true;
// add a new <script> to load Prism's script
型
  • boolean

メソッド

(static) highlight(text, grammar, language) → {string}

ソース

低レベル関数。仕組みがわかっている場合にのみ使用します。入力としてテキストの文字列と使用する言語定義を受け取り、生成されたHTMLを含む文字列を返します。

次のフックが実行されます。

  1. before-tokenize
  2. after-tokenize
  3. wrap: 各Token。
例
Prism.highlight('var foo = true;', Prism.languages.javascript, 'javascript');
パラメータ
名前 型 説明
text string

強調表示するコードを含む文字列。
grammar 文法

使用されるトークンを含むオブジェクト。

通常、Prism.languages.markupなどの言語定義。
language string

grammarに渡される言語定義の名前。
戻り値

強調表示されたHTML。

型
string

(static) highlightAll(asyncopt, callbackopt)

ソース

これは Prism API で最も高レベルの関数です。.language-xxxx クラスを持つすべての要素を取得し、それらそれぞれで Prism.highlightElement を呼び出します。

これは Prism.highlightAllUnder(document, async, callback) と同じです。

パラメータ
名前 型 属性 デフォルト 説明
async boolean <オプション>
 false

Prism.highlightAllUnder の場合と同じです。
callback HighlightCallback <オプション>

Prism.highlightAllUnder の場合と同じです。

(static) highlightAllUnder(container, asyncopt, callbackopt)

ソース

container 内の .language-xxxx クラスを持つすべての子孫を取得し、それらそれぞれで Prism.highlightElement を呼び出します。

次のフックが実行されます。

  1. before-highlightall
  2. before-all-elements-highlight
  3. Prism.highlightElement の各要素のすべてのフック。
パラメータ
名前 型 属性 デフォルト 説明
container ParentNode

.language-xxxx クラスを持つ子孫がハイライトされるルート要素。
async boolean <オプション>
 false

Web Workers を使用して、各要素を非同期的にハイライトするかどうか。
callback HighlightCallback <オプション>

ハイライトが完了した後に各要素で呼び出されるオプションのコールバック。

(static) highlightElement(element, asyncopt, callbackopt)

ソース

単一の要素内のコードをハイライトします。

次のフックが実行されます。

  1. before-sanity-check
  2. before-highlight
  3. Prism.highlight のすべてのフック。async が true の場合、これらのフックは非同期ワーカーによって実行されます。
  4. before-insert
  5. after-highlight
  6. complete

要素にテキストが含まれていない場合、または要素の言語にロードされた文法がない場合は、上記のフックの一部がスキップされます。

パラメータ
名前 型 属性 デフォルト 説明
element Element

コードを含む要素。処理されるには language-xxxx クラスがあり、xxxx は有効な言語識別子である必要があります。
async boolean <オプション>
 false

パフォーマンスを向上させ、大量のコードのハイライト中に UI のブロックを防ぐために、Web Workers を使用して要素を非同期的にハイライトするかどうか。このオプションは デフォルトでは無効 になっています。

注意: 非同期ハイライトを機能させるには、コードをハイライトするために必要なすべての言語定義をメインの prism.js ファイルに含める必要があります。 ダウンロードページ で独自のバンドルを構築できます。
callback HighlightCallback <オプション>

ハイライトが完了した後に呼び出されるオプションのコールバック。これは async が true の場合に主に役立ちます。その場合は、ハイライトが非同期的に実行されるためです。

(static) tokenize(text, grammar) → {TokenStream}

ソース

これは Prism の心臓部であり、使用できる最も低レベルの関数です。文字列を入力として受け取り、使用する言語定義を受け取り、トークン化されたコードを含む配列を返します。

言語定義にネストされたトークンが含まれる場合、各トークンで関数が再帰的に呼び出されます。

このメソッドは、非常に大まかなパーサーとしても、他のコンテキストでも役立ちます。

例
let code = `var foo = 0;`;
let tokens = Prism.tokenize(code, Prism.languages.javascript);
tokens.forEach(token => {
    if (token instanceof Prism.Token && token.type === 'number') {
        console.log(`Found numeric literal: ${token.content}`);
    }
});
パラメータ
名前 型 説明
text string

強調表示するコードを含む文字列。
grammar 文法

使用されるトークンを含むオブジェクト。

通常、Prism.languages.markupなどの言語定義。
戻り値

文字列とトークンの配列。トークンストリーム。

型
トークンストリーム