Custom class: Improved doc (#2512)

Author: RunDevelopment

plugins/custom-class/index.html

@@ -86,9 +86,9 @@ <h1>Notes</h1>
 			<p>Feature functions must be called <strong>AFTER</strong> Prism and this plugin. For example:</p>
 
 			<pre class="language-markup"><code>&lt;!-- 1. load prism --&gt;
-&lt;script src=&quot;prism.js&quot;&gt;&lt;/script&gt;
+&lt;script src="prism.js"&gt;&lt;/script&gt;
 &lt;!-- 2. load the plugin if you don't include it inside prism when download --&gt;
-&lt;script src=&quot;plugins/custom-class/custom-class.js&quot;&gt;&lt;/script&gt;
+&lt;script src="plugins/custom-class/custom-class.js"&gt;&lt;/script&gt;
 &lt;!-- 3. call the feature you want to use --&gt;
 &lt;script&gt;
 	Prism.plugins.customClass.map(myClassMap);
@@ -109,6 +109,7 @@ <h2>CSS Modules Usage:</h2>
 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 @@ <h1>Example</h1>
 	<h2>Prefix and map classes</h2>
 
 	<p>Input</p>
-	<pre class="language-markup"><code>&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code&gt;
+	<pre class="language-markup"><code>&lt;pre class="language-javascript"&gt;&lt;code&gt;
 	var foo = 'bar';
 &lt;/code&gt;&lt;/pre&gt;</code></pre>
 
@@ -129,18 +130,20 @@ <h2>Prefix and map classes</h2>
 Prism.plugins.customClass.prefix('pr-');</code></pre>
 
 	<p>Output</p>
-	<pre class="language-markup"><code>&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code&gt;
-	&lt;span class=&quot;pr-token pr-special-keyword&quot;&gt;var&lt;/span&gt;
+	<pre class="language-markup"><code>&lt;pre class="language-javascript"&gt;&lt;code class="language-markup"&gt;
+	&lt;span class="pr-token pr-special-keyword"&gt;var&lt;/span&gt;
 	foo
-	&lt;span class=&quot;pr-token pr-operator&quot;&gt;=&lt;/span&gt;
-	&lt;span class=&quot;pr-token pr-my-string&quot;&gt;'bar'&lt;/span&gt;
-	&lt;span class=&quot;pr-token pr-punctuation&quot;&gt;;&lt;/span&gt;
+	&lt;span class="pr-token pr-operator"&gt;=&lt;/span&gt;
+	&lt;span class="pr-token pr-my-string"&gt;'bar'&lt;/span&gt;
+	&lt;span class="pr-token pr-punctuation"&gt;;&lt;/span&gt;
 &lt;/code&gt;&lt;/pre&gt;</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>&lt;pre class=&quot;language-css&quot;&gt;&lt;code&gt;
+	<pre class="language-markup"><code>&lt;pre class="language-css"&gt;&lt;code&gt;
 a::after {
 	content: '\2b00 ';
 	opacity: .7;