Custom Class

This plugin allows you to prefix Prism default classes (.comment will become .namespace--comment) or replace them with your defined ones (like .editor__comment or .comment_7sh3a).

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:

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.

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(function (className, language) {
	if (language === 'css') {
		return cssSpecificMap[className] || className;
	} else {
		return className;
	}
});

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

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>