Move syntax-theme explainer to typography

styleguide/demopage/index.html

@@ -182,18 +182,9 @@
         <section>
           <h2>Preformatted Text</h2>
           <p>
-            This example uses manual syntax highlighting using the following CSS
+            This example uses manual syntax highlighting using the predefined
-            classes:
+            CSS classes mentioned in the typography:
           </p>
-          <ul>
-            <li><code>neutral</code></li>
-            <li><code>identifier</code></li>
-            <li><code>number</code></li>
-            <li><code>string</code></li>
-            <li><code>comment</code></li>
-            <li><code>keyword</code></li>
-            <li><code>function</code></li>
-          </ul>
           <pre
             aria-labelledby="code-positives-description"
           ><code><span class="keyword">#include</span> <span class="string">&lt;stdlib.h&gt;</span>

styleguide/typography/index.html

@@ -219,6 +219,42 @@
             <li><span class="code">Code</span></li>
           </ul>
         </div>
+        <p>
+          If you want to add syntax highlighting to your code, you can use the
+          following formatting (also available as CSS classes using the same
+          name). If you need more granularity, feel free to add more colors and
+          decorations as needed.
+        </p>
+        <ul>
+          <li>
+            <code><span class="comment">comment</span></code
+            >: text-shade 4, italic
+          </li>
+          <li>
+            <code><span class="neutral">neutral</span></code
+            >: text-shade 2
+          </li>
+          <li>
+            <code><span class="identifier">identifier</span></code
+            >: primary
+          </li>
+          <li>
+            <code><span class="function">function</span></code
+            >: accent 1, italic
+          </li>
+          <li>
+            <code><span class="keyword">keyword</span></code
+            >: accent 2
+          </li>
+          <li>
+            <code><span class="number">number</span></code
+            >: accent 3
+          </li>
+          <li>
+            <code><span class="string">string</span></code
+            >: accent 3, italic
+          </li>
+        </ul>
 
         <h2>Our custom font: Argon Glow</h2>
         <p>