diff --git a/demo/app/(mdx)/highlighter.tsx b/demo/app/(mdx)/highlighter.tsx
deleted file mode 100644
index 8b55ec4..0000000
--- a/demo/app/(mdx)/highlighter.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-"use client"
-
-import { useEffect, useLayoutEffect } from "react"
-import { Pirata_One } from "next/font/google"
-import { usePathname } from "next/navigation"
-
-export const Highlighter = () => {
-  const pathname = usePathname()
-  useEffect(() => {
-    ;(window as any).Prism?.highlightAll()
-  }, [pathname])
-
-  useLayoutEffect(() => {
-    // alway run in development when every re-render
-    if (process.env.NODE_ENV === "development") {
-      ;(window as any).Prism?.highlightAll()
-    }
-  })
-  return null
-}
diff --git a/demo/app/(mdx)/install/page.mdx b/demo/app/(mdx)/install/page.mdx
index 954c456..c1e7fb9 100644
--- a/demo/app/(mdx)/install/page.mdx
+++ b/demo/app/(mdx)/install/page.mdx
@@ -3,3 +3,7 @@ order: 1
 ---
 
 # Quick Start
+
+```sh
+npm install rc
+```
diff --git a/demo/app/(mdx)/layout.tsx b/demo/app/(mdx)/layout.tsx
index 51a56be..8210ba2 100644
--- a/demo/app/(mdx)/layout.tsx
+++ b/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 />
   </>
 )
diff --git a/demo/mdx-components.tsx b/demo/mdx-components.tsx
index ee1c3de..66ae352 100644
--- a/demo/mdx-components.tsx
+++ b/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>
+      )
+    },
   }
 }
diff --git a/demo/package.json b/demo/package.json
index d4465dd..da545b8 100644
--- a/demo/package.json
+++ b/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"
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
index 3ebfaad..7243e63 100644
--- a/demo/tsconfig.json
+++ b/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"
   ]
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 03cd7c6..be81bd1 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a9b1eda..0080e27 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -144,6 +144,9 @@ importers:
       sharp:
         specifier: ^0.33.2
         version: 0.33.2
+      shiki:
+        specifier: 1.2.0
+        version: 1.2.0
       tailwind-merge:
         specifier: ^2.2.1
         version: 2.2.1
@@ -1730,6 +1733,10 @@ packages:
       string-argv: 0.3.2
     dev: true
 
+  /@shikijs/core@1.2.0:
+    resolution: {integrity: sha512-OlFvx+nyr5C8zpcMBnSGir0YPD6K11uYhouqhNmm1qLiis4GA7SsGtu07r9gKS9omks8RtQqHrJL4S+lqWK01A==}
+    dev: false
+
   /@sinclair/typebox@0.27.8:
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
     dev: true
@@ -7005,6 +7012,12 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  /shiki@1.2.0:
+    resolution: {integrity: sha512-xLhiTMOIUXCv5DqJ4I70GgQCtdlzsTqFLZWcMHHG3TAieBUbvEGthdrlPDlX4mL/Wszx9C6rEcxU6kMlg4YlxA==}
+    dependencies:
+      '@shikijs/core': 1.2.0
+    dev: false
+
   /side-channel@1.0.6:
     resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==}
     engines: {node: '>= 0.4'}