fix: shiki stlying

web/next.config.js

@@ -3,9 +3,6 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
-  experimental: {
-    serverComponentsExternalPackages: ["shiki"],
-  },
 };
 
 module.exports = nextConfig;

web/package.json

@@ -43,7 +43,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.48.2",
     "react-use-websocket": "^4.5.0",
-    "shiki": "^0.14.6",
+    "shikiji": "^0.9.3",
     "sonner": "^1.2.4",
     "tailwind-merge": "^2.1.0",
     "tailwindcss-animate": "^1.0.7",

web/src/components/CodeBlock.tsx

@@ -1,10 +1,10 @@
 import { CopyButton } from "@/components/CopyButton";
-import type { Lang } from "shiki";
-import shiki from "shiki";
+import { getHighlighter, StringLiteralUnion  } from 'shikiji'
 
-export async function CodeBlock(props: { code: string; lang: Lang }) {
-  const highlighter = await shiki.getHighlighter({
-    theme: "one-dark-pro",
+export async function CodeBlock(props: { code: string; lang: StringLiteralUnion<string> }) {
+  const highlighter = await getHighlighter({
+    themes: ["one-dark-pro"],
+    langs: [props.lang]
   });
 
   return (
@@ -20,6 +20,7 @@ export async function CodeBlock(props: { code: string; lang: Lang }) {
         dangerouslySetInnerHTML={{
           __html: highlighter.codeToHtml(props.code.trim(), {
             lang: props.lang,
+            theme: "one-dark-pro",
           }),
         }}
       />