使用方法

highlightAll フィルターは、highlightAll メソッドと highlightAllUnder メソッドが実際には強調表示する要素をフィルタリングする方法を提供します。ページを読み込むときに Prism の自動強調表示を使用するが、特定のコードブロックを除外する場合に非常に役立ちます。

API

Prism.plugins.filterHighlightAll で次のものを見つけることができます

add(condition: (value: { element, language: string }) => boolean): void
与えられた関数がその要素に対して true を返す場合にのみ、要素の強調表示を許可する新しいフィルタを追加します。
これは、カスタム言語フィルタを定義するために使用できます。
addSelector(selector: string): void
要素が与えられた CSS セレクタと一致する場合にのみ、要素の強調表示を許可する新しいフィルタを追加します。
reject.add(condition: (value: { element, language: string }) => boolean): void
add と同じですが、条件を満たしていない要素のみが強調表示されます。
reject.addSelector(selector: string): void
addSelector と同じですが、セレクタと一致しない要素のみが強調表示されます。
filterKnown: boolean = false
既知の言語のみを許可するには、これを true に設定します。言語が設定されていないか未知の言語のコードブロックは強調表示されません。

要素は、上記のすべてが要素を受け入れた場合にのみ、highlightAll メソッドと highlightAllUnder メソッドによって強調表示されます。

属性

Filter highlightAll プラグインを含むスクリプトに、次の data-* 属性を追加することもできます。

<script src="..." data-filter-selector="<css selector>">
この属性は Prism.plugins.filterHighlightAll.addSelector の略記です。属性の値はそのまま addSelector 関数に渡されます。
<script src="..." data-reject-selector="<css selector>">
この属性は Prism.plugins.filterHighlightAll.reject.addSelector の略記です。属性の値はそのまま rejectSelector 関数に渡されます。
<script src="..." data-filter-known>
この属性を使用して、Prism.plugins.filterHighlightAll.filterKnown の値を設定できます。属性が存在する場合、filterKnown は true に設定され、存在しない場合は false に設定されます。

例

次のコードは、このページでフィルタを定義するために使用されます。

// <code> elements with a .no-highlight class will be ignored
Prism.plugins.filterHighlightAll.reject.addSelector('code.no-highlight');
Prism.plugins.filterHighlightAll.reject.addSelector('pre.no-highlight > code');

// don't highlight CSS code
Prism.plugins.filterHighlightAll.add(function (env) {
	return env.language !== 'css';
});

結果

let foo = "I'm not being highlighted";
a.link::after {
	content: 'also not being highlighted';
	color: #F00;
}

Prism はこれらのブロックを無視するため、Prism が通常削除する独自の静的強調表示を定義できます。

a.link::before {
	content: 'I just do my own highlighting';
	color: #F00;
}