svelte adds code highlighting, and code highlighting supports dark mode

preview-ui/src/App.jsx

@@ -9,17 +9,27 @@ import { getHighlighter, setCDN } from "shiki";
 export default function Home() {
   const [showCanvas, setShowCanvas] = useState(true);
   const [copied, setCopied] = useState(false);
-  const [code, setCode] = useState("");
+  const [lightCode, setLightCode] = useState("");
+  const [darkCode, setDarkCode] = useState("");
 
   function setCodeHighlighter() {
     setCDN("https://cdn.jsdelivr.net/npm/shiki");
-    getHighlighter({ theme: "one-dark-pro", langs: ["jsx"] })
+    getHighlighter({ themes: ["github-light", "github-dark"], langs: ["jsx"] })
       .then((h) => {
-        const html = h.codeToHtml(previewStr, { lang: "jsx" });
-        setCode(html);
+        const ligitHtmlCode = h.codeToHtml(previewStr, {
+          lang: "jsx",
+          theme: "github-light",
+        });
+        setLightCode(ligitHtmlCode);
+        const darkHtmlCode = h.codeToHtml(previewStr, {
+          lang: "jsx",
+          theme: "github-dark",
+        });
+        setDarkCode(darkHtmlCode);
       })
       .catch((error) => {
-        setCode(error);
+        setLightCode(error);
+        setDarkCode(error);
       });
   }
 
@@ -40,7 +50,7 @@ export default function Home() {
           </ErrorBoundary>
         </div>
       ) : (
-        <pre className="bg-gray-100 mx-1 p-1 rounded overflow-auto relative text-xs">
+        <pre className="bg-gray-100 mx-1 p-1 rounded relative text-xs">
           <CopyToClipboard
             text={previewStr}
             onCopy={() => {
@@ -52,7 +62,8 @@ export default function Home() {
               {copied ? "Copied!" : "Copy Code"}
             </Button>
           </CopyToClipboard>
-          <div dangerouslySetInnerHTML={{ __html: code }}></div>
+          <div dangerouslySetInnerHTML={{ __html: lightCode }}></div>
+          <div dangerouslySetInnerHTML={{ __html: darkCode }}></div>
         </pre>
       )}
     </main>

preview-ui/src/index.css

@@ -74,4 +74,26 @@
   body {
     @apply bg-background text-foreground;
   }
-}
+}
+
+.shiki {
+  padding: 10px;
+  overflow: auto;
+}
+
+.shiki.github-dark {
+  display: none;
+}
+
+.shiki.github-light {
+  display: block;
+}
+
+/* 当 body 存在 'dark' 类名时应用的样式 */
+body.dark .shiki.github-dark {
+  display: block;
+}
+
+body.dark .shiki.github-light {
+  display: none;
+}

preview-ui/tailwind.config.js

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
+  safelist: ["dark"],
   content: [
     './pages/**/*.{js,jsx}',
     './components/**/*.{js,jsx}',

svelte-preview-ui/package.json

@@ -25,6 +25,7 @@
     "clsx": "^2.1.0",
     "cmdk-sv": "^0.0.12",
     "lucide-svelte": "^0.303.0",
+    "shiki": "^0.14.7",
     "tailwind-merge": "^2.2.0",
     "tailwind-variants": "^0.1.19"
   }

svelte-preview-ui/src/app.pcss

@@ -75,4 +75,25 @@
   body {
     @apply bg-background text-foreground;
   }
-}
+}
+.shiki {
+  padding: 10px;
+  overflow: auto;
+}
+
+.shiki.github-dark {
+  display: none;
+}
+
+.shiki.github-light {
+  display: block;
+}
+
+/* 当 body 存在 'dark' 类名时应用的样式 */
+body.dark .shiki.github-dark {
+  display: block;
+}
+
+body.dark .shiki.github-light {
+  display: none;
+}

svelte-preview-ui/src/routes/+page.svelte

@@ -3,6 +3,8 @@
   import ErrorBoundary from "./error-boundary.svelte";
   import Preview from "./preview.svelte";
   import previewStr from "./preview.svelte?raw";
+  import { onMount } from "svelte";
+  import { getHighlighter, setCDN } from "shiki";
 
   let showCanvas = true;
   let copied = false;
@@ -18,6 +20,33 @@
       setTimeout(() => (copied = false), 2000);
     });
   };
+
+  let lightCode = "";
+  let darkCode = "";
+  function setCodeHighlighter() {
+    setCDN("https://cdn.jsdelivr.net/npm/shiki");
+    getHighlighter({
+      themes: ["github-light", "github-dark"],
+      langs: ["svelte"],
+    })
+      .then((h) => {
+        lightCode = h.codeToHtml(previewStr, {
+          lang: "svelte",
+          theme: "github-light",
+        });
+        darkCode = h.codeToHtml(previewStr, {
+          lang: "svelte",
+          theme: "github-dark",
+        });
+      })
+      .catch((error) => {
+        lightCode = error;
+        darkCode = error;
+      });
+  }
+  onMount(() => {
+    setCodeHighlighter();
+  });
 </script>
 
 <main class="vx-dev-wrapper relative">
@@ -35,17 +64,16 @@
       </ErrorBoundary>
     </div>
   {:else}
-    <div
-      class="bg-gray-100 mx-1 p-1 rounded overflow-auto relative text-xs whitespace-pre"
-    >
+    <div class="bg-gray-100 mx-1 p-1 rounded relative text-xs">
       <Button
         on:click={copyCode}
         variant="outline"
         class="mb-2 absolute top-1 right-1 whitespace-nowrap"
       >
         {copied ? "Copied!" : "Copy Code"}
       </Button>
-      <code>{previewStr}</code>
+      <div>{@html lightCode}</div>
+      <div>{@html darkCode}</div>
     </div>
   {/if}
 </main>

svelte-preview-ui/yarn.lock

@@ -402,6 +402,11 @@ ansi-regex@^6.0.1:
   resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
   integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
 
+ansi-sequence-parser@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-sequence-parser/-/ansi-sequence-parser-1.1.1.tgz#e0aa1cdcbc8f8bb0b5bca625aac41f5f056973cf"
+  integrity sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==
+
 ansi-styles@^4.0.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
@@ -859,6 +864,11 @@ jiti@^1.19.1:
   resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
   integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
 
+jsonc-parser@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.1.tgz#031904571ccf929d7670ee8c547545081cb37f1a"
+  integrity sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==
+
 kleur@^4.1.5:
   version "4.1.5"
   resolved "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
@@ -1192,6 +1202,16 @@ shebang-regex@^3.0.0:
   resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
+shiki@^0.14.7:
+  version "0.14.7"
+  resolved "https://registry.yarnpkg.com/shiki/-/shiki-0.14.7.tgz#c3c9e1853e9737845f1d2ef81b31bcfb07056d4e"
+  integrity sha512-dNPAPrxSc87ua2sKJ3H5dQ/6ZaY8RNnaAqK+t0eG7p0Soi2ydiqbGOTaZCqaYvA/uZYfS1LJnemt3Q+mSfcPCg==
+  dependencies:
+    ansi-sequence-parser "^1.1.0"
+    jsonc-parser "^3.2.0"
+    vscode-oniguruma "^1.7.0"
+    vscode-textmate "^8.0.0"
+
 signal-exit@^4.0.1:
   version "4.1.0"
   resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
@@ -1412,6 +1432,16 @@ vitefu@^0.2.5:
   resolved "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz#c1b93c377fbdd3e5ddd69840ea3aa70b40d90969"
   integrity sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==
 
+vscode-oniguruma@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz#439bfad8fe71abd7798338d1cd3dc53a8beea94b"
+  integrity sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==
+
+vscode-textmate@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/vscode-textmate/-/vscode-textmate-8.0.0.tgz#2c7a3b1163ef0441097e0b5d6389cd5504b59e5d"
+  integrity sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==
+
 which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"

vue-preview-ui/src/App.vue

@@ -13,18 +13,16 @@
         <Preview />
       </ErrorBoundary>
     </div>
-    <div
-      v-else
-      class="bg-gray-100 mx-1 p-1 rounded overflow-auto relative text-xs whitespace-pre"
-    >
+    <div v-else class="bg-gray-100 mx-1 p-1 rounded relative text-xs">
       <Button
         @click="copyCode"
         variant="outline"
         class="mb-2 absolute top-1 right-1 whitespace-nowrap"
       >
         {{ copied ? "Copied!" : "Copy Code" }}
       </Button>
-      <div v-html="code"></div>
+      <div v-html="lightCode"></div>
+      <div v-html="darkCode"></div>
     </div>
   </main>
 </template>
@@ -37,16 +35,24 @@ import Preview from "./Preview.vue";
 import previewStr from "./Preview.vue?raw";
 import { getHighlighter, setCDN } from "shiki";
 
-const code = ref("");
+const lightCode = ref("");
+const darkCode = ref("");
 function setCodeHighlighter() {
   setCDN("https://cdn.jsdelivr.net/npm/shiki");
-  getHighlighter({ theme: "one-dark-pro", langs: ["vue"] })
+  getHighlighter({ themes: ["github-light", "github-dark"], langs: ["vue"] })
     .then((h) => {
-      const html = h.codeToHtml(previewStr, { lang: "vue" });
-      code.value = html;
+      lightCode.value = h.codeToHtml(previewStr, {
+        theme: "github-light",
+        lang: "vue",
+      });
+      darkCode.value = h.codeToHtml(previewStr, {
+        theme: "github-dark",
+        lang: "vue",
+      });
     })
     .catch((error) => {
-      code.value = error;
+      lightCode.value = error;
+      darkCode.value = error;
     });
 }
 

vue-preview-ui/src/index.css

@@ -76,4 +76,26 @@
   body {
     @apply bg-background text-foreground;
   }
-}
+}
+
+.shiki {
+  padding: 10px;
+  overflow: auto;
+}
+
+.shiki.github-dark {
+  display: none;
+}
+
+.shiki.github-light {
+  display: block;
+}
+
+/* 当 body 存在 'dark' 类名时应用的样式 */
+body.dark .shiki.github-dark {
+  display: block;
+}
+
+body.dark .shiki.github-light {
+  display: none;
+}

vue-preview-ui/tailwind.config.js

@@ -3,7 +3,7 @@ const animate = require("tailwindcss-animate")
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
-
+  safelist: ["dark"],
   content: [
     './pages/**/*.{js,jsx,vue}',
     './components/**/*.{js,jsx,vue}',