From 2fd5d7ce432a1fe71b42557f6a5c9465f9c5d6a8 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Tue, 10 Oct 2023 21:46:49 +0800
Subject: [PATCH] Update docs

---
 .changeset/few-peas-hunt.md          | 24 ++++++++++++++++++++++++
 packages/astro/components/Code.astro |  1 +
 2 files changed, 25 insertions(+)

diff --git a/.changeset/few-peas-hunt.md b/.changeset/few-peas-hunt.md
index e4dd16e03..25f1425bf 100644
--- a/.changeset/few-peas-hunt.md
+++ b/.changeset/few-peas-hunt.md
@@ -5,3 +5,27 @@
 ---
 
 Update internal `shiki` syntax highlighter to `shikiji`. Existing docs on `shiki` still stays the same, but `shikiji` will help make bundling simpler and easier to maintain.
+
+`shikiji` also produces a smaller HTML output by attaching fallback `color` styles on the `pre` or `code` element instead of to the line `span` directly. For example:
+
+Before:
+
+```html
+<code class="astro-code" style="background-color: #24292e">
+  <pre>
+    <span class="line" style="color: #e1e4e8">my code</span>
+  </pre>
+</code>
+```
+
+After:
+
+```html
+<code class="astro-code" style="background-color: #24292e; color: #e1e4e8">
+  <pre>
+    <span class="line">my code<span>
+  </pre>
+</code>
+```
+
+This shouldn't affect most existing styles as assigning a color to `span` or `.line` didn't work before, but if you did create this style anyways, it may now indirectly affect syntax highlighting. 
diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index 8f2783db9..a502c6eaa 100644
--- a/packages/astro/components/Code.astro
+++ b/packages/astro/components/Code.astro
@@ -81,6 +81,7 @@ const html = highlighter.codeToHtml(code, {
 				node.tagName = 'code';
 			}
 
+			// Cast to string as shikiji will always pass them as strings instead of any other types
 			const classValue = (node.properties.class as string) ?? '';
 			const styleValue = (node.properties.style as string) ?? '';