動機付け

Prismの既定のクラスは賢明だが固定されており、あまりに一般的です。このプラグインは、ニーズに合わせてそれらのクラスをカスタマイズするいくつかの方法を提供しています。使用例

既存のクラスとの競合を避けるために、すべてに名前空間を追加したい（例: .prism--comment）。
名前付け規則（例: BEM）を使用します。 .editor__comment などのクラスを記述したいと考えています。
CSS Modules を使用します。 .comment_7sh3a のように、ハッシュ化されたクラスを使用したいと思います。
特定のトークンのクラスをより細かく制御する必要があります。新しいクラスをトークンに追加する関数を定義できます。これにより、コードの特定の部分のハイライトを部分的に変更できます。

使用方法

すべての Prism クラスにプレフィックスを追加します

Prism.plugins.customClass.prefix('prism--')

定義したクラスで Prism クラスの一部を置換します

Prism.plugins.customClass.map({
	keyword: 'special-keyword',
	string: 'string_ch29s',
	comment: 'comment_93jsa'
});

オブジェクトのキーは、置換したいクラス（例: comment）、値は使用するクラス（例: my-comment）です。指定されていないクラスはそのままになります。

または、元のクラスを受け取ってマッピングされたクラスを返す関数を受け渡すこともできます。この関数を使用して、言語固有のマッピングされたクラスを実装することもできます。
例

Prism.plugins.customClass.map((className, language) => {
	if (language === 'css') {
		return cssSpecificMap[className] || className;
	} else {
		return className;
	}
});

新しいクラスを追加します

トークンごとに、言語ごとに新しいクラスを追加できます。

Prism.plugins.customClass.add(({content, type, language}) => {
	if (content === 'content' && type === 'property' && language === 'css') {
		return 'content-property';
	}
});

注意: 指定されたcontentは、現在のトークンの内部 HTML です。すべての<と&文字はエスケープされ、ネストされたトークンの HTML コードが含まれる場合があります。

メモ

機能関数は、Prismとこのプラグインの後に呼び出す必要があります。たとえば

<!-- 1. load prism -->
<script src="prism.js"></script>
<!-- 2. load the plugin if you don't include it inside prism when download -->
<script src="plugins/custom-class/custom-class.js"></script>
<!-- 3. call the feature you want to use -->
<script>
	Prism.plugins.customClass.map(myClassMap);
	Prism.plugins.customClass.prefix(myPrefixString);
</script>

ほとんどの場合、1つの機能を使用すれば十分です。ただし、必要に応じて両方の機能を一緒に使用することもできます（結果は.my-namespace--comment_93jsaのようになります）。

CSS モジュールの使用方法

このプラグインの当初の目的は、CSS モジュールで使用することです。CSS モジュールによって返されるクラスマップオブジェクトと完全に連携します。たとえば

import Prism from 'prismjs';
import classMap from 'styles/editor-class-map.css';
Prism.plugins.customClass.map(classMap)

注意: このプラグインは、生成されたトークン要素（通常はspan.token形式）にのみ影響します。他のプラグインによって生成されるものすべての要素（例: Toolbar 要素と行番号要素）を含むcodeとpre要素のクラスは変更されません。

例

プレフィックスとマップクラス

入力

<pre class="language-javascript"><code>
	var foo = 'bar';
</code></pre>

オプション

Prism.plugins.customClass.map({
	keyword: 'special-keyword',
	string: 'my-string'
});
Prism.plugins.customClass.prefix('pr-');

出力

<pre class="language-javascript"><code class="language-markup">
	<span class="pr-token pr-special-keyword">var</span>
	foo
	<span class="pr-token pr-operator">=</span>
	<span class="pr-token pr-my-string">'bar'</span>
	<span class="pr-token pr-punctuation">;</span>
</code></pre>

このプラグインはトークンにのみ影響することに注意してください。codeとpre要素のクラスにはプレフィックスが付けられません。

新しいクラスを追加します

入力

<pre class="language-css"><code>
a::after {
	content: '\2b00 ';
	opacity: .7;
}
</code></pre>

オプション

Prism.plugins.customClass.add(({language, type, content}) => {
	if (content === 'content' && type === 'property' && language === 'css') {
		return 'content-property';
	}
});

出力

<pre class=" language-css"><code class=" language-css">
<span class="token selector">a::after</span>
<span class="token punctuation">{</span>
	<span class="token property content-property">content</span>
	<span class="token punctuation">:</span>
	<span class="token string">'\2b00 '</span>
	<span class="token punctuation">;</span>
	<span class="token property">opacity</span>
	<span class="token punctuation">:</span>
	 .7
	<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>