187 lines
6.8 KiB
HTML
187 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
<meta charset="utf-8" />
|
|
<link rel="icon" href="assets/favicon.png" />
|
|
<title>Custom Class ▲ Prism plugins</title>
|
|
<base href="../.." />
|
|
<link rel="stylesheet" href="assets/style.css" />
|
|
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
|
|
<script src="assets/vendor/prefixfree.min.js"></script>
|
|
<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
|
|
<script src="https://www.google-analytics.com/ga.js" async></script>
|
|
</head>
|
|
<body class="language-javascript">
|
|
|
|
<header data-plugin-header="custom-class"></header>
|
|
|
|
<section>
|
|
<h1>Motivation</h1>
|
|
|
|
<p>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:</p>
|
|
|
|
<ul>
|
|
<li>
|
|
You want to add namespace for all of them (like <code>.prism--comment</code>) to avoid conflict with your existing classes.
|
|
</li>
|
|
<li>
|
|
You use a naming convention (like <a href="https://en.bem.info/method">BEM</a>). You want to write classes like <code>.editor__comment</code>.
|
|
</li>
|
|
<li>You use
|
|
<a href="https://github.com/css-modules/css-modules">CSS Modules</a>. You want to use your hashed classes, like <code>.comment_7sh3a</code>.
|
|
</li>
|
|
<li>You need more granular control about the classes of certain tokens.
|
|
You can define functions which will add new classes to tokens, so selectively change the highlighting of certain parts of your code.
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h1>How to use</h1>
|
|
|
|
<h2>Prefix all Prism classes</h2>
|
|
|
|
<pre><code>Prism.plugins.customClass.prefix('prism--')</code></pre>
|
|
|
|
<h2>Replace some Prism classes with ones you defined</h2>
|
|
|
|
<pre class="language-js"><code>Prism.plugins.customClass.map({
|
|
keyword: 'special-keyword',
|
|
string: 'string_ch29s',
|
|
comment: 'comment_93jsa'
|
|
});</code></pre>
|
|
|
|
<p>Object's keys are the classes you want to replace (eg: <code>comment</code>), with their values being the classes you want to use (eg: <code>my-comment</code>). Classes which are not specified will stay as they are.</p>
|
|
|
|
<p>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.<br>Example:</p>
|
|
|
|
<pre class="language-js"><code>Prism.plugins.customClass.map((className, language) => {
|
|
if (language === 'css') {
|
|
return cssSpecificMap[className] || className;
|
|
} else {
|
|
return className;
|
|
}
|
|
});</code></pre>
|
|
|
|
<h2>Add new classes</h2>
|
|
|
|
<p>You can add new classes with per-token and per-language precision.</p>
|
|
|
|
<pre class="language-js"><code>Prism.plugins.customClass.add(({content, type, language}) => {
|
|
if (content === 'content' && type === 'property' && language === 'css') {
|
|
return 'content-property';
|
|
}
|
|
});</code></pre>
|
|
|
|
<p><b>Note:</b> The given <code>content</code> is the inner HTML of the current token. All <code><</code> and <code>&</code> characters are escaped and it might contain the HTML code of nested tokens.</p>
|
|
|
|
</section>
|
|
|
|
<section>
|
|
<h1>Notes</h1>
|
|
|
|
<ul>
|
|
<li>
|
|
<p>Feature functions must be called <strong>AFTER</strong> Prism and this plugin. For example:</p>
|
|
|
|
<pre class="language-markup"><code><!-- 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></code></pre>
|
|
|
|
</li>
|
|
|
|
<li>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 <code>.my-namespace--comment_93jsa</code>).</li>
|
|
|
|
</ul>
|
|
|
|
<h2>CSS Modules Usage:</h2>
|
|
|
|
<p>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:</p>
|
|
|
|
<pre class="language-js"><code>import Prism from 'prismjs';
|
|
import classMap from 'styles/editor-class-map.css';
|
|
Prism.plugins.customClass.map(classMap)</code></pre>
|
|
|
|
<p><b>Note:</b> This plugin only affects generated token elements (usually of the form <code>span.token</code>). The classes of <code>code</code> and <code>pre</code> elements as well as all elements generated by other plugins (e.g. <a href="plugins/toolbar/">Toolbar</a> elements and <a href="plugins/line-numbers">line number</a> elements) will not be changed.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h1>Example</h1>
|
|
|
|
<h2>Prefix and map classes</h2>
|
|
|
|
<p>Input</p>
|
|
<pre class="language-markup"><code><pre class="language-javascript"><code>
|
|
var foo = 'bar';
|
|
</code></pre></code></pre>
|
|
|
|
<p>Options</p>
|
|
<pre class="language-js"><code>Prism.plugins.customClass.map({
|
|
keyword: 'special-keyword',
|
|
string: 'my-string'
|
|
});
|
|
Prism.plugins.customClass.prefix('pr-');</code></pre>
|
|
|
|
<p>Output</p>
|
|
<pre class="language-markup"><code><pre class="language-javascript"><code class="language-markup">
|
|
<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></code></pre>
|
|
|
|
<p>Note that this plugin only affects tokens. The classes of the <code>code</code> and <code>pre</code> elements won't be prefixed.</p>
|
|
|
|
<h2>Add new classes</h2>
|
|
|
|
<p>Input</p>
|
|
<pre class="language-markup"><code><pre class="language-css"><code>
|
|
a::after {
|
|
content: '\2b00 ';
|
|
opacity: .7;
|
|
}
|
|
</code></pre></code></pre>
|
|
|
|
<p>Options</p>
|
|
<pre class="language-js"><code>Prism.plugins.customClass.add(({language, type, content}) => {
|
|
if (content === 'content' && type === 'property' && language === 'css') {
|
|
return 'content-property';
|
|
}
|
|
});</code></pre>
|
|
|
|
<p>Output</p>
|
|
<pre class="language-markup"><code><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></code></pre>
|
|
|
|
</section>
|
|
|
|
<footer data-src="assets/templates/footer.html" data-type="text/html"></footer>
|
|
|
|
<script src="prism.js"></script>
|
|
<script src="plugins/custom-class/prism-custom-class.js"></script>
|
|
<script src="assets/vendor/utopia.js"></script>
|
|
<script src="components.js"></script>
|
|
<script src="assets/code.js"></script>
|
|
|
|
</body>
|
|
</html>
|