From 10748e679b0a57ba289befc77c3d4860fe27877e Mon Sep 17 00:00:00 2001
From: lilith <contact@traumweh.dev>
Date: Tue, 4 Mar 2025 22:45:31 +0100
Subject: [PATCH] Move syntax-theme explainer to typography

---
 styleguide/demopage/index.html   | 13 ++----------
 styleguide/typography/index.html | 36 ++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/styleguide/demopage/index.html b/styleguide/demopage/index.html
index f182b9c..82ecc1e 100644
--- a/styleguide/demopage/index.html
+++ b/styleguide/demopage/index.html
@@ -182,18 +182,9 @@
         <section>
           <h2>Preformatted Text</h2>
           <p>
-            This example uses manual syntax highlighting using the following CSS
-            classes:
+            This example uses manual syntax highlighting using the predefined
+            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>
diff --git a/styleguide/typography/index.html b/styleguide/typography/index.html
index 1e77bca..bfa9bc2 100644
--- a/styleguide/typography/index.html
+++ b/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>