动机

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 Modules 用法

该插件的最初目的是与 CSS Modules 配合使用。它与 CSS Modules 返回的类映射对象完美配合。例如

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

注意：该插件仅影响生成的标记元素（通常为 span.token）。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>