From 63ff7f83c56ab1319959f2baae97ebb9b1980bae Mon Sep 17 00:00:00 2001
From: Debbie Matthews <debbie.matthews@snowflake.com>
Date: Sun, 7 Dec 2025 21:50:13 -0800
Subject: [PATCH 1/4] Fix code block copy button

---
 components/blocks/code.js         | 49 ++++++++++++++++++++++++-------
 components/blocks/code.module.css | 10 ++++++-
 2 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/components/blocks/code.js b/components/blocks/code.js
index a1b2780bf..db5595074 100644
--- a/components/blocks/code.js
+++ b/components/blocks/code.js
@@ -15,7 +15,14 @@ import styles from "./code.module.css";
 // Initialize the cache for imported languages.
 const languageImports = new Map();
 
-const Code = ({ code, children, language, img, lines }) => {
+const Code = ({
+  code,
+  children,
+  language,
+  img,
+  lines,
+  hideCopyButton = false,
+}) => {
   // Create a ref for the code element.
   const codeRef = useRef(null);
 
@@ -49,9 +56,17 @@ const Code = ({ code, children, language, img, lines }) => {
             );
           }
         }
-        // Only highlight the current code block.
+        // Highlight the code block and conditionally enable toolbar plugins (including copy button)
         if (codeRef.current) {
+          // First highlight the element
           Prism.highlightElement(codeRef.current);
+          // Then activate toolbar plugins on the parent container if copy button is not hidden
+          if (!hideCopyButton) {
+            const container = codeRef.current.closest(`.${styles.Container}`);
+            if (container) {
+              Prism.highlightAllUnder(container);
+            }
+          }
         }
       }
     }
@@ -70,33 +85,45 @@ const Code = ({ code, children, language, img, lines }) => {
 
   if (img) {
     ConditionalRendering = (
-      <section className={styles.Container}>
+      <section
+        className={classNames(styles.Container, {
+          [styles.NoCopyButton]: hideCopyButton,
+        })}
+      >
         <Image src={img} clean={true} />
-        <div className={styles.Pre}>
+        <pre className={styles.Pre}>
           <code ref={codeRef} className={languageClass}>
             {customCode}
           </code>
-        </div>
+        </pre>
       </section>
     );
   } else if (lines) {
     ConditionalRendering = (
-      <section className={classNames(styles.Container, styles.LineHighlight)}>
-        <div data-line={lines}>
+      <section
+        className={classNames(styles.Container, styles.LineHighlight, {
+          [styles.NoCopyButton]: hideCopyButton,
+        })}
+      >
+        <pre data-line={lines}>
           <code ref={codeRef} className={languageClass}>
             {customCode}
           </code>
-        </div>
+        </pre>
       </section>
     );
   } else {
     ConditionalRendering = (
-      <section className={styles.Container}>
-        <div className={styles.Pre}>
+      <section
+        className={classNames(styles.Container, {
+          [styles.NoCopyButton]: hideCopyButton,
+        })}
+      >
+        <pre className={styles.Pre}>
           <code ref={codeRef} className={languageClass}>
             {customCode}
           </code>
-        </div>
+        </pre>
       </section>
     );
   }
diff --git a/components/blocks/code.module.css b/components/blocks/code.module.css
index ae115558e..c60a5d919 100644
--- a/components/blocks/code.module.css
+++ b/components/blocks/code.module.css
@@ -9,7 +9,11 @@
 }
 
 .Pre {
-  @apply p-4 bg-gray-90 text-white font-medium rounded-md relative py-6 px-8 leading-relaxed;
+  @apply p-4 bg-gray-90 text-white font-medium rounded-md relative py-8 px-8 leading-relaxed;
+}
+
+.Container pre {
+  @apply overflow-auto max-w-full whitespace-pre;
 }
 
 .Pre code {
@@ -37,6 +41,10 @@
   @apply opacity-100;
 }
 
+.NoCopyButton button {
+  @apply hidden;
+}
+
 /* Code block adjustments */
 .Pre code :global(.operator) {
   @apply text-yellow-50;

From b92021531eba5908f60508adfc1835fc1acea3f5 Mon Sep 17 00:00:00 2001
From: Debbie Matthews <debbie.matthews@snowflake.com>
Date: Mon, 8 Dec 2025 05:40:23 -0800
Subject: [PATCH 2/4] Add custom code style for RefCard

---
 components/blocks/refCard.module.css | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/components/blocks/refCard.module.css b/components/blocks/refCard.module.css
index d82054611..70e4987b1 100644
--- a/components/blocks/refCard.module.css
+++ b/components/blocks/refCard.module.css
@@ -47,6 +47,10 @@
   @apply p-4 pb-0 text-gray-90;
 }
 
+.Container pre {
+  @apply px-1 pt-2.5 leading-loose;
+}
+
 :global(.dark) .Container {
   @apply border-gray-90;
 }
@@ -150,12 +154,20 @@
 }
 
 .Container section div {
-  @apply flex flex-col flex-1;
-  @apply m-0 rounded-none p-4 h-full text-sm tracking-tight;
   @apply bg-gray-10;
   @apply text-gray-80;
 }
 
+.Container section div:not(:global(.toolbar)) {
+  @apply flex flex-col flex-1;
+  @apply m-0 rounded-none px-3 py-2 h-full text-sm tracking-tight;
+}
+
+.Container section div:global(.toolbar),
+.Container section div:global(.toolbar-item) {
+  @apply h-0 p-0;
+}
+
 /* Code block adjustments */
 .Container section div code :global(.operator) {
   @apply text-yellow-90;

From e64c19795e0516ee979dc329ae831341defa4476 Mon Sep 17 00:00:00 2001
From: Debbie Matthews <debbie.matthews@snowflake.com>
Date: Mon, 8 Dec 2025 05:43:15 -0800
Subject: [PATCH 3/4] Change code blocks with theme

---
 components/blocks/autofunction.module.css | 14 ++++++++++++--
 components/blocks/code.module.css         | 14 ++++++++++++--
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/components/blocks/autofunction.module.css b/components/blocks/autofunction.module.css
index f7b407c36..5ff6e96a6 100644
--- a/components/blocks/autofunction.module.css
+++ b/components/blocks/autofunction.module.css
@@ -64,7 +64,7 @@
 }
 
 .CodeBlockContainer pre {
-  @apply p-4 bg-gray-90 text-white font-medium rounded-xl relative py-6 px-8 leading-relaxed;
+  @apply p-4 bg-gray-10 text-gray-80 font-medium rounded-xl relative leading-relaxed;
 }
 
 .CodeBlockContainer pre code {
@@ -85,7 +85,7 @@
 }
 
 .CodeBlockContainer button span {
-  @apply absolute right-10 text-white font-mono text-sm tracking-tight font-normal opacity-0;
+  @apply absolute right-10 text-gray-80 font-mono text-sm tracking-tight font-normal opacity-0;
 }
 
 .CodeBlockContainer button:hover span {
@@ -175,3 +175,13 @@
 :global(.dark) .Keyword::after {
   @apply bg-gray-80 text-gray-30;
 }
+
+/* Dark mode for code blocks */
+:global(.dark) .CodeBlockContainer pre {
+  @apply bg-gray-90 text-white;
+}
+
+/* Dark mode button text */
+:global(.dark) .CodeBlockContainer button span {
+  @apply text-white;
+}
diff --git a/components/blocks/code.module.css b/components/blocks/code.module.css
index c60a5d919..a32b00902 100644
--- a/components/blocks/code.module.css
+++ b/components/blocks/code.module.css
@@ -9,7 +9,7 @@
 }
 
 .Pre {
-  @apply p-4 bg-gray-90 text-white font-medium rounded-md relative py-8 px-8 leading-relaxed;
+  @apply p-6 bg-gray-10 text-gray-80 font-medium rounded-md relative leading-relaxed;
 }
 
 .Container pre {
@@ -34,7 +34,7 @@
 }
 
 .Container button span {
-  @apply absolute right-10 text-white font-mono text-sm tracking-tight font-normal opacity-0;
+  @apply absolute right-10 text-gray-80 font-mono text-sm tracking-tight font-normal opacity-0;
 }
 
 .Container button:hover span {
@@ -120,3 +120,13 @@
 :global(.dark) .Pre code :global(.string) {
   @apply text-darkBlue-30;
 }
+
+/* Dark mode background and text for Pre */
+:global(.dark) .Pre {
+  @apply bg-gray-90 text-white;
+}
+
+/* Dark mode button text */
+:global(.dark) .Container button span {
+  @apply text-white;
+}

From 426aba86909a612d46430c1a36cacf21256f03e3 Mon Sep 17 00:00:00 2001
From: Debbie Matthews <debbie.matthews@snowflake.com>
Date: Mon, 8 Dec 2025 14:01:35 -0800
Subject: [PATCH 4/4] Unify syntax highlighting color; update light mode

---
 components/blocks/autofunction.module.css |  50 +---
 components/blocks/code.module.css         | 272 +------------------
 components/blocks/codeTile.module.css     |  32 +--
 styles/main.scss                          |   1 +
 styles/syntax-highlighting.scss           | 313 ++++++++++++++++++++++
 5 files changed, 317 insertions(+), 351 deletions(-)
 create mode 100644 styles/syntax-highlighting.scss

diff --git a/components/blocks/autofunction.module.css b/components/blocks/autofunction.module.css
index 5ff6e96a6..fcbec2131 100644
--- a/components/blocks/autofunction.module.css
+++ b/components/blocks/autofunction.module.css
@@ -92,55 +92,7 @@
   @apply opacity-100;
 }
 
-/* Code block adjustments */
-.CodeBlockContainer pre code :global(.decorator.annotation.punctuation) {
-  @apply text-red-50;
-}
-
-.CodeBlockContainer pre code :global(.operator) {
-  @apply text-yellow-50;
-}
-
-.CodeBlockContainer pre code :global(.decorator) {
-  @apply text-yellow-80;
-}
-
-.CodeBlockContainer pre code :global(.keyword) {
-  @apply text-darkBlue-50;
-}
-
-.CodeBlockContainer pre code :global(.builtin) {
-  @apply text-lightBlue-40;
-}
-
-.CodeBlockContainer pre code :global(.string) {
-  @apply text-green-80;
-}
-
-.CodeBlockContainer pre code :global(.number),
-.CodeBlockContainer pre code :global(.boolean) {
-  @apply text-green-40;
-}
-
-.CodeBlockContainer pre code :global(.function) {
-  @apply text-red-50;
-}
-
-.CodeBlockContainer pre code :global(.punctuation) {
-  @apply text-gray-60;
-}
-
-.CodeBlockContainer pre code :global(.comment) {
-  @apply text-gray-60 italic font-normal;
-}
-
-.CodeBlockContainer pre code :global(.string) {
-  @apply text-darkBlue-30;
-}
-
-.CodeBlockContainer pre code :global(.table) {
-  @apply inline;
-}
+/* Syntax highlighting is now handled globally via styles/syntax-highlighting.scss */
 
 /* Styles for deprecation notice in param */
 .DeprecatedContent {
diff --git a/components/blocks/code.module.css b/components/blocks/code.module.css
index 64c586b9e..213188c9b 100644
--- a/components/blocks/code.module.css
+++ b/components/blocks/code.module.css
@@ -54,274 +54,4 @@
   @apply text-white;
 }
 
-/* Code block adjustments */
-.Pre code :global(.operator) {
-  @apply text-yellow-50;
-}
-
-.Pre code :global(.decorator.annotation.punctuation) {
-  @apply text-red-60;
-}
-
-.Pre code :global(.string) {
-  @apply text-darkBlue-30;
-}
-
-.Pre code :global(.keyword) {
-  @apply text-darkBlue-50;
-}
-
-.Pre code :global(.builtin) {
-  @apply text-lightBlue-40;
-}
-
-.Pre code :global(.number),
-.Pre code :global(.boolean) {
-  @apply text-green-40;
-}
-
-.Pre code :global(.punctuation) {
-  @apply text-gray-60;
-}
-
-.Pre code :global(.comment) {
-  @apply text-gray-60 italic font-normal;
-}
-
-.Pre code :global(.table) {
-  @apply inline;
-}
-
-.Pre code :global(.deleted) {
-  @apply text-red-70 bg-red-70 bg-opacity-20;
-}
-.Pre code :global(.inserted) {
-  @apply text-green-70 bg-green-70 bg-opacity-20;
-}
-
-/* Additional token types for HTML/markup, CSS, and other languages */
-.Pre code :global(.tag) {
-  @apply text-red-60;
-}
-
-.Pre code :global(.attr-name) {
-  @apply text-lightBlue-40;
-}
-
-.Pre code :global(.attr-value) {
-  @apply text-darkBlue-30;
-}
-
-.Pre code :global(.entity) {
-  @apply text-green-40;
-}
-
-.Pre code :global(.property) {
-  @apply text-lightBlue-40;
-}
-
-.Pre code :global(.selector) {
-  @apply text-red-60;
-}
-
-.Pre code :global(.rule) {
-  @apply text-darkBlue-50;
-}
-
-.Pre code :global(.function) {
-  @apply text-red-60 font-semibold;
-}
-
-.Pre code :global(.variable) {
-  @apply text-yellow-50;
-}
-
-.Pre code :global(.class-name) {
-  @apply text-lightBlue-40;
-}
-
-.Pre code :global(.constant) {
-  @apply text-green-40;
-}
-
-.Pre code :global(.symbol) {
-  @apply text-yellow-50;
-}
-
-.Pre code :global(.important) {
-  @apply text-red-60 font-bold;
-}
-
-.Pre code :global(.atrule) {
-  @apply text-darkBlue-50;
-}
-
-.Pre code :global(.url) {
-  @apply text-darkBlue-30;
-}
-
-.Pre code :global(.regex) {
-  @apply text-green-40;
-}
-
-.Pre code :global(.prolog),
-.Pre code :global(.doctype),
-.Pre code :global(.cdata) {
-  @apply text-gray-60 italic;
-}
-
-/* Additional common token types */
-.Pre code :global(.namespace) {
-  @apply text-lightBlue-40;
-}
-
-.Pre code :global(.char) {
-  @apply text-darkBlue-30;
-}
-
-.Pre code :global(.interpolation) {
-  @apply text-yellow-50;
-}
-
-.Pre code :global(.annotation) {
-  @apply text-red-60;
-}
-
-.Pre code :global(.generic) {
-  @apply text-gray-60;
-}
-
-.Pre code :global(.script) {
-  @apply text-gray-60;
-}
-
-.Pre code :global(.plain-text) {
-  @apply text-white;
-}
-
-/* Dark mode adjustments */
-:global(.dark) .Pre code :global(.operator),
-:global(.dark) .Pre code :global(.decorator) {
-  @apply text-yellow-80;
-}
-
-:global(.dark) .Pre code :global(.keyword) {
-  @apply text-darkBlue-50;
-}
-
-:global(.dark) .Pre code :global(.builtin) {
-  @apply text-lightBlue-60;
-}
-
-:global(.dark) .Pre code :global(.number),
-:global(.dark) .Pre code :global(.boolean) {
-  @apply text-green-40;
-}
-
-:global(.dark) .Pre code :global(.function) {
-  @apply text-red-60 font-semibold;
-}
-
-:global(.dark) .Pre code :global(.comment) {
-  @apply text-gray-60;
-}
-
-:global(.dark) .Pre code :global(.string) {
-  @apply text-darkBlue-30;
-}
-
-/* Dark mode styles for additional token types */
-:global(.dark) .Pre code :global(.tag) {
-  @apply text-red-60;
-}
-
-:global(.dark) .Pre code :global(.attr-name) {
-  @apply text-lightBlue-60;
-}
-
-:global(.dark) .Pre code :global(.attr-value) {
-  @apply text-darkBlue-30;
-}
-
-:global(.dark) .Pre code :global(.entity) {
-  @apply text-green-40;
-}
-
-:global(.dark) .Pre code :global(.property) {
-  @apply text-lightBlue-60;
-}
-
-:global(.dark) .Pre code :global(.selector) {
-  @apply text-red-60;
-}
-
-:global(.dark) .Pre code :global(.rule) {
-  @apply text-darkBlue-50;
-}
-
-:global(.dark) .Pre code :global(.variable) {
-  @apply text-yellow-80;
-}
-
-:global(.dark) .Pre code :global(.class-name) {
-  @apply text-lightBlue-60;
-}
-
-:global(.dark) .Pre code :global(.constant) {
-  @apply text-green-40;
-}
-
-:global(.dark) .Pre code :global(.symbol) {
-  @apply text-yellow-80;
-}
-
-:global(.dark) .Pre code :global(.important) {
-  @apply text-red-60 font-bold;
-}
-
-:global(.dark) .Pre code :global(.atrule) {
-  @apply text-darkBlue-50;
-}
-
-:global(.dark) .Pre code :global(.url) {
-  @apply text-darkBlue-30;
-}
-
-:global(.dark) .Pre code :global(.regex) {
-  @apply text-green-40;
-}
-
-:global(.dark) .Pre code :global(.prolog),
-:global(.dark) .Pre code :global(.doctype),
-:global(.dark) .Pre code :global(.cdata) {
-  @apply text-gray-60 italic;
-}
-
-/* Dark mode for additional common token types */
-:global(.dark) .Pre code :global(.namespace) {
-  @apply text-lightBlue-60;
-}
-
-:global(.dark) .Pre code :global(.char) {
-  @apply text-darkBlue-30;
-}
-
-:global(.dark) .Pre code :global(.interpolation) {
-  @apply text-yellow-80;
-}
-
-:global(.dark) .Pre code :global(.annotation) {
-  @apply text-red-60;
-}
-
-:global(.dark) .Pre code :global(.generic) {
-  @apply text-gray-60;
-}
-
-:global(.dark) .Pre code :global(.script) {
-  @apply text-gray-60;
-}
-
-:global(.dark) .Pre code :global(.plain-text) {
-  @apply text-white;
-}
+/* Syntax highlighting is now handled globally via styles/syntax-highlighting.scss */
diff --git a/components/blocks/codeTile.module.css b/components/blocks/codeTile.module.css
index e387ce5b9..299ac7cc0 100644
--- a/components/blocks/codeTile.module.css
+++ b/components/blocks/codeTile.module.css
@@ -56,34 +56,4 @@
   @apply col-span-full md:col-span-3 lg:col-span-2;
 }
 
-/* Code block adjustments */
-/* Code block adjustments */
-.Container pre code :global(.operator),
-.Container pre code :global(.decorator) {
-  @apply text-yellow-80;
-}
-
-.Container pre code :global(.keyword) {
-  @apply text-darkBlue-60;
-}
-
-.Container pre code :global(.builtin) {
-  @apply text-lightBlue-70;
-}
-
-.Container pre code :global(.string) {
-  @apply text-green-80;
-}
-
-.Container pre code :global(.number),
-.Container pre code :global(.boolean) {
-  @apply text-green-60;
-}
-
-.Container pre code :global(.function) {
-  @apply text-red-60;
-}
-
-.Container pre code :global(.punctuation) {
-  @apply text-gray-60;
-}
+/* Syntax highlighting is now handled globally via styles/syntax-highlighting.scss */
diff --git a/styles/main.scss b/styles/main.scss
index 4badfab4e..fae621cd6 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -5,5 +5,6 @@
 @import "./scrollbars.scss";
 @import "./admonition.scss";
 @import "./cookie-banner.scss";
+@import "./syntax-highlighting.scss";
 
 @import "./print.scss";
diff --git a/styles/syntax-highlighting.scss b/styles/syntax-highlighting.scss
new file mode 100644
index 000000000..86ee774ce
--- /dev/null
+++ b/styles/syntax-highlighting.scss
@@ -0,0 +1,313 @@
+/* Syntax Highlighting Token Colors
+ * Centralized color definitions for all code blocks
+ */
+
+/* Light mode syntax highlighting tokens */
+:root {
+  /* Primary syntax tokens */
+  --syntax-operator: theme("colors.orange.80");
+  --syntax-decorator: theme("colors.orange.80");
+  --syntax-keyword: theme("colors.darkBlue.80");
+  --syntax-builtin: theme("colors.lightBlue.80");
+  --syntax-string: theme("colors.acqua.80");
+  --syntax-number: theme("colors.green.70");
+  --syntax-boolean: theme("colors.green.70");
+  --syntax-function: theme("colors.red.70");
+  --syntax-punctuation: theme("colors.gray.70");
+  --syntax-comment: theme("colors.gray.70");
+
+  /* HTML/Markup tokens */
+  --syntax-tag: theme("colors.red.70");
+  --syntax-attr-name: theme("colors.lightBlue.80");
+  --syntax-attr-value: theme("colors.green.80");
+  --syntax-entity: theme("colors.green.70");
+
+  /* CSS tokens */
+  --syntax-property: theme("colors.lightBlue.80");
+  --syntax-selector: theme("colors.red.70");
+  --syntax-rule: theme("colors.darkBlue.80");
+  --syntax-atrule: theme("colors.darkBlue.80");
+  --syntax-url: theme("colors.green.80");
+
+  /* Additional common tokens */
+  --syntax-variable: theme("colors.orange.80");
+  --syntax-class-name: theme("colors.lightBlue.80");
+  --syntax-constant: theme("colors.green.70");
+  --syntax-symbol: theme("colors.orange.80");
+  --syntax-important: theme("colors.red.70");
+  --syntax-regex: theme("colors.green.70");
+  --syntax-namespace: theme("colors.lightBlue.80");
+  --syntax-char: theme("colors.green.80");
+  --syntax-interpolation: theme("colors.orange.80");
+  --syntax-annotation: theme("colors.red.70");
+  --syntax-generic: theme("colors.gray.70");
+  --syntax-script: theme("colors.gray.70");
+  --syntax-plain-text: theme("colors.gray.90");
+
+  /* Special tokens */
+  --syntax-prolog: theme("colors.gray.70");
+  --syntax-doctype: theme("colors.gray.70");
+  --syntax-cdata: theme("colors.gray.70");
+  --syntax-deleted: theme("colors.red.70");
+  --syntax-inserted: theme("colors.green.70");
+}
+
+/* Dark mode syntax highlighting tokens */
+.dark {
+  /* Primary syntax tokens - keep existing dark mode colors */
+  --syntax-operator: theme("colors.yellow.80");
+  --syntax-decorator: theme("colors.yellow.80");
+  --syntax-keyword: theme("colors.darkBlue.50");
+  --syntax-builtin: theme("colors.lightBlue.60");
+  --syntax-string: theme("colors.darkBlue.30");
+  --syntax-number: theme("colors.green.40");
+  --syntax-boolean: theme("colors.green.40");
+  --syntax-function: theme("colors.red.60");
+  --syntax-punctuation: theme("colors.gray.60");
+  --syntax-comment: theme("colors.gray.60");
+
+  /* HTML/Markup tokens */
+  --syntax-tag: theme("colors.red.60");
+  --syntax-attr-name: theme("colors.lightBlue.60");
+  --syntax-attr-value: theme("colors.darkBlue.30");
+  --syntax-entity: theme("colors.green.40");
+
+  /* CSS tokens */
+  --syntax-property: theme("colors.lightBlue.60");
+  --syntax-selector: theme("colors.red.60");
+  --syntax-rule: theme("colors.darkBlue.50");
+  --syntax-atrule: theme("colors.darkBlue.50");
+  --syntax-url: theme("colors.darkBlue.30");
+
+  /* Additional common tokens */
+  --syntax-variable: theme("colors.yellow.80");
+  --syntax-class-name: theme("colors.lightBlue.60");
+  --syntax-constant: theme("colors.green.40");
+  --syntax-symbol: theme("colors.yellow.80");
+  --syntax-important: theme("colors.red.60");
+  --syntax-regex: theme("colors.green.40");
+  --syntax-namespace: theme("colors.lightBlue.60");
+  --syntax-char: theme("colors.darkBlue.30");
+  --syntax-interpolation: theme("colors.yellow.80");
+  --syntax-annotation: theme("colors.red.60");
+  --syntax-generic: theme("colors.gray.60");
+  --syntax-script: theme("colors.gray.60");
+  --syntax-plain-text: theme("colors.white");
+
+  /* Special tokens */
+  --syntax-prolog: theme("colors.gray.60");
+  --syntax-doctype: theme("colors.gray.60");
+  --syntax-cdata: theme("colors.gray.60");
+  --syntax-deleted: theme("colors.red.70");
+  --syntax-inserted: theme("colors.green.70");
+}
+
+/* Global syntax highlighting classes using CSS custom properties */
+/* Target code elements within our specific containers */
+pre code .operator,
+code .operator {
+  color: var(--syntax-operator) !important;
+}
+
+pre code .decorator,
+code .decorator {
+  color: var(--syntax-decorator) !important;
+}
+
+pre code .decorator.annotation.punctuation,
+code .decorator.annotation.punctuation {
+  color: var(--syntax-decorator) !important;
+}
+
+pre code .keyword,
+code .keyword {
+  color: var(--syntax-keyword) !important;
+}
+
+pre code .builtin,
+code .builtin {
+  color: var(--syntax-builtin) !important;
+}
+
+pre code .string,
+code .string {
+  color: var(--syntax-string) !important;
+}
+
+pre code .number,
+pre code .boolean,
+code .number,
+code .boolean {
+  color: var(--syntax-number) !important;
+}
+
+pre code .function,
+code .function {
+  color: var(--syntax-function) !important;
+  font-weight: 600 !important;
+}
+
+pre code .punctuation,
+code .punctuation {
+  color: var(--syntax-punctuation) !important;
+}
+
+pre code .comment,
+code .comment {
+  color: var(--syntax-comment) !important;
+  font-style: italic !important;
+  font-weight: normal !important;
+}
+
+/* HTML/Markup tokens */
+pre code .tag,
+code .tag {
+  color: var(--syntax-tag) !important;
+}
+
+pre code .attr-name,
+code .attr-name {
+  color: var(--syntax-attr-name) !important;
+}
+
+pre code .attr-value,
+code .attr-value {
+  color: var(--syntax-attr-value) !important;
+}
+
+pre code .entity,
+code .entity {
+  color: var(--syntax-entity) !important;
+}
+
+/* CSS tokens */
+pre code .property,
+code .property {
+  color: var(--syntax-property) !important;
+}
+
+pre code .selector,
+code .selector {
+  color: var(--syntax-selector) !important;
+}
+
+pre code .rule,
+code .rule {
+  color: var(--syntax-rule) !important;
+}
+
+pre code .atrule,
+code .atrule {
+  color: var(--syntax-atrule) !important;
+}
+
+pre code .url,
+code .url {
+  color: var(--syntax-url) !important;
+}
+
+/* Additional common tokens */
+pre code .variable,
+code .variable {
+  color: var(--syntax-variable) !important;
+}
+
+pre code .class-name,
+code .class-name {
+  color: var(--syntax-class-name) !important;
+}
+
+pre code .constant,
+code .constant {
+  color: var(--syntax-constant) !important;
+}
+
+pre code .symbol,
+code .symbol {
+  color: var(--syntax-symbol) !important;
+}
+
+pre code .important,
+code .important {
+  color: var(--syntax-important) !important;
+  font-weight: bold !important;
+}
+
+pre code .regex,
+code .regex {
+  color: var(--syntax-regex) !important;
+}
+
+pre code .namespace,
+code .namespace {
+  color: var(--syntax-namespace) !important;
+}
+
+pre code .char,
+code .char {
+  color: var(--syntax-char) !important;
+}
+
+pre code .interpolation,
+code .interpolation {
+  color: var(--syntax-interpolation) !important;
+}
+
+pre code .annotation,
+code .annotation {
+  color: var(--syntax-annotation) !important;
+}
+
+pre code .generic,
+code .generic {
+  color: var(--syntax-generic) !important;
+}
+
+pre code .script,
+code .script {
+  color: var(--syntax-script) !important;
+}
+
+pre code .plain-text,
+code .plain-text {
+  color: var(--syntax-plain-text) !important;
+}
+
+/* Special tokens */
+pre code .prolog,
+pre code .doctype,
+pre code .cdata,
+code .prolog,
+code .doctype,
+code .cdata {
+  color: var(--syntax-prolog) !important;
+  font-style: italic !important;
+}
+
+pre code .deleted,
+code .deleted {
+  color: var(--syntax-deleted) !important;
+  background-color: rgba(
+    255,
+    75,
+    75,
+    0.2
+  ) !important; /* red-70 with 20% opacity */
+}
+
+pre code .inserted,
+code .inserted {
+  color: var(--syntax-inserted) !important;
+  background-color: rgba(
+    33,
+    195,
+    84,
+    0.2
+  ) !important; /* green-70 with 20% opacity */
+}
+
+/* Table token for inline display */
+pre code .table,
+code .table {
+  display: inline !important;
+}