Custom class: Improved doc (#2512)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
diff --git a/plugins/custom-class/index.html b/plugins/custom-class/index.html
index 624c37b..f453e15 100644
--- a/plugins/custom-class/index.html
+++ b/plugins/custom-class/index.html
@@ -86,9 +86,9 @@
<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>
+<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>
+<script src="plugins/custom-class/custom-class.js"></script>
<!-- 3. call the feature you want to use -->
<script>
Prism.plugins.customClass.map(myClassMap);
@@ -109,6 +109,7 @@
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>
@@ -117,7 +118,7 @@ Prism.plugins.customClass.map(classMap)</code></pre>
<h2>Prefix and map classes</h2>
<p>Input</p>
- <pre class="language-markup"><code><pre class="language-javascript"><code>
+ <pre class="language-markup"><code><pre class="language-javascript"><code>
var foo = 'bar';
</code></pre></code></pre>
@@ -129,18 +130,20 @@ Prism.plugins.customClass.map(classMap)</code></pre>
Prism.plugins.customClass.prefix('pr-');</code></pre>
<p>Output</p>
- <pre class="language-markup"><code><pre class="language-javascript"><code>
- <span class="pr-token pr-special-keyword">var</span>
+ <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>
+ <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>
+ <pre class="language-markup"><code><pre class="language-css"><code>
a::after {
content: '\2b00 ';
opacity: .7;