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

# Todo

- Take a function as the transformation (Comment in #950
- Allow to custom tokens per language, using nested object (Comment in #947)