Move syntax-theme explainer to typography

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>