Motivation

Prism default classes are sensible but fixed and too generic. This plugin provide some ways to customize those classes to suit your needs. Example usages:

How to use

Prefix all Prism classes

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

Replace some Prism classes with ones you defined

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

Object's keys are the classes you want to replace (eg: comment), with their values being the classes you want to use (eg: my-comment). Classes which are not specified will stay as they are.

Alternatively you can also pass a function that takes the original class and returns the mapped class. This function can also be used implement language specific mapped classes.
Example:

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

Add new classes

You can add new classes with per-token and per-language precision.

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

Note: The given content is the inner HTML of the current token. All < and & characters are escaped and it might contain the HTML code of nested tokens.

Notes

CSS Modules Usage:

The initial purpose of this plugin is to be used with CSS Modules. It works perfectly with the class map object returned by CSS Modules. For example:

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

Example

Prefix and map classes

Input

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

Options

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

Output

<pre class="language-javascript"><code>
	<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>

Add new classes

Input

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

Options

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

Output

<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>