From 75a7c38b9954a1e14c4ddec5b86696bfc9a73e7e Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Mon, 20 Oct 2025 11:07:54 -0700
Subject: [PATCH] Migrate from Prism to Shiki

---
 site/astro.config.ts                        |   8 +-
 site/src/components/shortcodes/Code.astro   |  40 ++++-
 site/src/content/docs/utilities/display.mdx |   4 +-
 site/src/libs/astro.ts                      |   4 +-
 site/src/scss/_syntax.scss                  | 159 +++-----------------
 5 files changed, 69 insertions(+), 146 deletions(-)

diff --git a/site/astro.config.ts b/site/astro.config.ts
index 400330f4a4..de9a1433bb 100644
--- a/site/astro.config.ts
+++ b/site/astro.config.ts
@@ -24,7 +24,13 @@ export default defineConfig({
   integrations: [bootstrap()],
   markdown: {
     smartypants: false,
-    syntaxHighlight: 'prism'
+    syntaxHighlight: 'shiki',
+    shikiConfig: {
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark'
+      }
+    }
   },
   site,
   vite: {
diff --git a/site/src/components/shortcodes/Code.astro b/site/src/components/shortcodes/Code.astro
index ba2c61165f..6377aaeaeb 100644
--- a/site/src/components/shortcodes/Code.astro
+++ b/site/src/components/shortcodes/Code.astro
@@ -1,7 +1,7 @@
 ---
 import fs from 'node:fs'
 import path from 'node:path'
-import { Prism } from '@astrojs/prism'
+import { codeToHtml } from 'shiki'
 
 interface Props {
   /**
@@ -57,6 +57,40 @@ if (filePath && fileMatch && codeToDisplay) {
 
   codeToDisplay = match[0]
 }
+
+// Add line wrapper for shell languages to support shell prompts
+const shouldWrapLines = lang && ['bash', 'sh', 'powershell'].includes(lang)
+
+const highlightedCode = codeToDisplay && lang
+  ? await codeToHtml(codeToDisplay, {
+      lang,
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark'
+      },
+      transformers: shouldWrapLines ? [
+        {
+          name: 'line-wrapper',
+          line(node) {
+            // Wrap non-comment lines in a span with .line class for shell prompt styling
+            const hasOnlyComments = node.children.every(child =>
+              child.type === 'element' &&
+              child.properties?.class &&
+              Array.isArray(child.properties.class) &&
+              child.properties.class.some((cls) => typeof cls === 'string' && cls.includes('comment'))
+            )
+
+            if (!hasOnlyComments) {
+              node.properties = node.properties || {}
+              node.properties.class = node.properties.class
+                ? `${node.properties.class} line`
+                : 'line'
+            }
+          }
+        }
+      ] : []
+    })
+  : null
 ---
 
 <script>
@@ -155,8 +189,8 @@ if (filePath && fileMatch && codeToDisplay) {
   }
   <div class="highlight">
     {
-      codeToDisplay && lang ? (
-        <Prism code={codeToDisplay} lang={lang} />
+      highlightedCode ? (
+        <Fragment set:html={highlightedCode} />
       ) : (
         /* prettier-ignore */ <pre class={className}><slot /></pre>
       )
diff --git a/site/src/content/docs/utilities/display.mdx b/site/src/content/docs/utilities/display.mdx
index ce19d79ee4..4f75d3face 100644
--- a/site/src/content/docs/utilities/display.mdx
+++ b/site/src/content/docs/utilities/display.mdx
@@ -77,8 +77,8 @@ The media queries affect screen widths with the given breakpoint *or larger*. Fo
 There's no more clearfix helper in v6 as it's an outdated technique. Instead, use the `display: flow-root` utility, `.d-flow-root`. This forces a container element to create a new block formatting context without the clearfix.
 
 <Example code={`<div class="d-flow-root">
-  <div class="float-end px-3 py-2 border rounded-3">Floated element</div>
-</div>`} />
+    <div class="float-end px-3 py-2 border rounded-3">Floated element</div>
+  </div>`} />
 
 ## Examples
 
diff --git a/site/src/libs/astro.ts b/site/src/libs/astro.ts
index 09555e7899..b282fc6b22 100644
--- a/site/src/libs/astro.ts
+++ b/site/src/libs/astro.ts
@@ -10,7 +10,7 @@ import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import { getConfig } from './config'
 import { rehypeBsTable } from './rehype'
 import { remarkBsConfig, remarkBsDocsref } from './remark'
-import { configurePrism } from './prism'
+// import { configurePrism } from './prism'
 import {
   docsDirectory,
   getDocsFsPath,
@@ -38,7 +38,7 @@ const headingsRangeRegex = new RegExp(`^h[${getConfig().anchors.min}-${getConfig
 export function bootstrap(): AstroIntegration[] {
   const sitemapExcludedUrls = sitemapExcludes.map((url) => `${getConfig().baseURL}${url}/`)
 
-  configurePrism()
+  // configurePrism()
 
   return [
     bootstrap_auto_import(),
diff --git a/site/src/scss/_syntax.scss b/site/src/scss/_syntax.scss
index 968b3795f6..cf6b8b6c63 100644
--- a/site/src/scss/_syntax.scss
+++ b/site/src/scss/_syntax.scss
@@ -4,162 +4,45 @@
 @use "../../../scss/variables" as *;
 @use "../../../scss/mixins/color-mode" as *;
 
+// Shell prompt colors for light mode
 :root,
 [data-bs-theme="light"] {
-  // --base00: #fff;
-  // --base01: #f5f5f5;
-  --base02: #c8c8fa;
-  --base03: #565c64;
-  --base04: #666;
-  --base05: #333;
-  --base06: #fff;
-  --base07: var(--#{$prefix}teal-700); // #9a6700
-  --base08: color-mix(in srgb, var(--#{$prefix}red-500), var(--#{$prefix}red-600)); // #bc4c00
-  --base09: var(--#{$prefix}  cyan-700); // #087990
-  --base0A: var(--#{$prefix}purple-500); // #795da3
-  --base0B: var(--#{$prefix}blue-700); // #183691
-  --base0C: var(--#{$prefix}blue-700); // #183691
-  --base0D: var(--#{$prefix}purple-500); // #795da3
-  --base0E: var(--#{$prefix}pink-600); // #a71d5d
-  --base0F: #333;
+  --shell-prompt-color: #565c64;
 }
 
+// Shell prompt colors for dark mode
 @include color-mode(dark, true) {
-  // --base00: #282c34;
-  // --base01: #353b45;
-  --base02: #3e4451;
-  --base03: #868e96;
-  --base04: #868e96;
-  --base05: #abb2bf;
-  --base06: #b6bdca;
-  --base07: var(--#{$prefix}orange-300); // #d19a66
-  --base08: var(--#{$prefix}cyan-300);
-  --base09: var(--#{$prefix}orange-300); // #d19a66
-  --base0A: var(--#{$prefix}yellow-200); // #e5c07b
-  --base0B: var(--#{$prefix}teal-300); // #98c379
-  --base0C: var(--#{$prefix}teal-300); // #56b6c2
-  --base0D: var(--#{$prefix}blue-300); // #61afef
-  --base0E: var(--#{$prefix}indigo-200); // #c678dd
-  --base0F: var(--#{$prefix}red-300); // #be5046
+  --shell-prompt-color: #868e96;
 }
 
-// Shell prompts
+.shiki {
+  background-color: transparent !important; // stylelint-disable-line declaration-no-important
+}
+
+// Shiki dual-theme support
+// Light mode: use default inline styles (no override needed)
+// Dark mode: override to use the dark theme CSS variables
+@include color-mode(dark, true) {
+  .shiki,
+  .shiki span {
+    color: var(--shiki-dark) !important; // stylelint-disable-line declaration-no-important
+  }
+}
+
+// Shell prompts - these work with Shiki's transformer that adds .line class
 @layer custom {
   .language-bash .line::before,
   .language-sh .line::before {
     display: inline-block;
-    color: var(--base03);
+    color: var(--shell-prompt-color);
     content: "$ ";
     user-select: none;
   }
 
   .language-powershell .line::before {
     display: inline-block;
-    color: var(--base0C);
+    color: var(--shell-prompt-color);
     content: "PM> ";
     user-select: none;
   }
-
-  .token {
-    &.comment,
-    &.prolog,
-    &.doctype,
-    &.cdata {
-      color: var(--base03);
-    }
-
-    &.punctuation {
-      color: var(--base05);
-    }
-
-    &.property {
-      color: var(--base0A);
-    }
-
-    &.tag {
-      color: var(--base08);
-    }
-
-    &.boolean,
-    &.number {
-      color: var(--base09);
-    }
-
-    &.constant,
-    &.symbol,
-    &.deleted {
-      color: var(--base08);
-    }
-
-    &.attr-name,
-    &.string,
-    &.char,
-    &.builtin,
-    &.inserted {
-      color: var(--base0C);
-    }
-
-    &.operator,
-    &.entity,
-    &.url {
-      color: var(--base05);
-    }
-
-    &.atrule,
-    &.attr-value,
-    &.keyword {
-      color: var(--base0E);
-    }
-
-    &.function {
-      color: var(--base0B);
-    }
-
-    &.selector,
-    &.class-name {
-      color: var(--base07);
-    }
-
-    &.regex,
-    &.important {
-      color: var(--base0A);
-    }
-
-    &.variable {
-      color: var(--base08);
-    }
-
-    &.important,
-    &.bold {
-      font-weight: $font-weight-bold;
-    }
-
-    &.italic {
-      font-style: italic;
-    }
-
-    &.entity {
-      cursor: help;
-    }
-  }
-
-  .language-diff {
-    .token {
-      &.deleted {
-        color: var(--#{$prefix}red-400);
-        background-color: transparent;
-      }
-      &.inserted {
-        color: var(--#{$prefix}green-400);
-        background-color: transparent;
-      }
-    }
-  }
-
-  .language-bash,
-  .language-sh {
-    .token.comment {
-      color: var(--base03);
-    }
-  }
 }
-- 
2.47.3