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:
.prism--comment
) to avoid conflict with your existing classes.
.editor__comment
.
.comment_7sh3a
.
Prism.plugins.customClass.prefix('prism--')
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;
}
});
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.
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>
.my-namespace--comment_93jsa
).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)
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>
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>