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


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:


This plugin currently provides 2 features:

1. Prefix all Prism classes with a string


2. Replace some Prism classes with your defined ones via an object{
	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: (className, language) {
	if (language === 'css') {
		return cssSpecificMap[className] || className;
	} else {
		return className;


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



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

	keyword: 'special-keyword',
	string: 'my-string'


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