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:

You want to add namespace for all of them (like .prism--comment) to avoid conflict with your existing classes.
You use a naming convention (like BEM). You want to write classes like .editor__comment.
You use CSS Modules. You want to use your hashed classes, like .comment_7sh3a.

Features

This plugin currently provides 2 features:

1. Prefix all Prism classes with a string

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

2. Replace some Prism classes with your defined ones via an object

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

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

Notes

Feature functions must be called AFTER Prism and this plugin. For example:

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

In most cases, using 1 feature is enough. However, it is possible to use both of them together if you want (Result will be like .my-namespace--comment_93jsa).

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

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-my-string">'bar'</span>
	<span class="pr-token pr-punctuation">;</span>
</code></pre>

Custom Class