Fix(code-block): fix invisible text in Shiki one-light theme

.changeset/proud-bushes-tie.md

@@ -0,0 +1,5 @@
+---
+"ai-elements": patch
+---
+
+Fixed invisible white text in Shiki's one-light theme by adding a transformer that replaces `color:white` with a visible dark color

packages/elements/src/code-block.tsx

@@ -49,6 +49,23 @@ const lineNumberTransformer: ShikiTransformer = {
   },
 };
 
+const fixWhiteColorInLightThemeTransformer: ShikiTransformer = {
+  name: "fix-white-color-in-light-theme",
+  span(node) {
+    const style = node.properties.style;
+    if (style && typeof style === "string") {
+      // Replace white colors with a visible dark color
+      const fixedStyle = style.replace(
+        /color:\s*(white)\b/gi,
+        "color:#383A42"
+      );
+      if (fixedStyle !== style) {
+        node.properties.style = fixedStyle;
+      }
+    }
+  },
+};
+
 export async function highlightCode(
   code: string,
   language: BundledLanguage,
@@ -57,12 +74,11 @@ export async function highlightCode(
   const transformers: ShikiTransformer[] = showLineNumbers
     ? [lineNumberTransformer]
     : [];
-
   return await Promise.all([
     codeToHtml(code, {
       lang: language,
       theme: "one-light",
-      transformers,
+      transformers: [...transformers, fixWhiteColorInLightThemeTransformer],
     }),
     codeToHtml(code, {
       lang: language,