fix: use shiki

Signed-off-by: Innei <i@innei.in>

demo/app/(mdx)/install/page.mdx

@@ -3,3 +3,7 @@ order: 1
 ---
 
 # Quick Start
+
+```sh
+npm install rc
+```

demo/app/(mdx)/layout.tsx

@@ -3,11 +3,8 @@
 
 import type { PropsWithChildren } from "react"
 
-import { Highlighter } from "./highlighter"
-
 export default ({ children }: PropsWithChildren) => (
   <>
     <div className="prose dark:prose-invert">{children}</div>
-    <Highlighter />
   </>
 )

demo/mdx-components.tsx

@@ -1,7 +1,30 @@
 import type { MDXComponents } from "mdx/types"
+import { getHighlighter } from "shiki"
+
+const highlighter = await getHighlighter({
+  themes: ["github-dark"],
+  langs: ["javascript", "typescript", "json", "jsx", "tsx", "shell"],
+})
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     ...components,
+    pre: (props) => {
+      const language =
+        (props.children as any).props.className?.replace(/language-/, "") ||
+        "text"
+
+      const rawCode = (props.children as any).props.children
+      return (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: highlighter.codeToHtml(rawCode, {
+              lang: language,
+              theme: "github-dark",
+            }),
+          }}
+        ></div>
+      )
+    },
   }
 }

demo/package.json

@@ -34,6 +34,7 @@
     "remark-frontmatter": "5.0.0",
     "remark-mdx-frontmatter": "4.0.0",
     "sharp": "^0.33.2",
+    "shiki": "1.2.0",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.6",
     "vaul": "^0.9.0"

demo/tsconfig.json

@@ -15,6 +15,7 @@
     "module": "esnext",
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
+    "target": "ES2022",
     "isolatedModules": true,
     "jsx": "preserve",
     "baseUrl": ".",
@@ -45,4 +46,4 @@
   "exclude": [
     "node_modules"
   ]
-}
+}

package.json

@@ -73,7 +73,8 @@
     "prebuild": "rm -rf lib && rm -rf esm",
     "build": "vite build && tailwindcss -i src/tw.css -o dist/index.css",
     "prepare": "husky install",
-    "release": "bump"
+    "release": "bump",
+    "dev": "vite build --watch"
   },
   "devDependencies": {
     "@innei/bump-version": "1.5.10",