feat(docs): replace syntax highlighting library with custom codeblock component, hide hash icon for headings in alert component

docs/package.json

@@ -39,7 +39,6 @@
     "react-medium-image-zoom": "^5.3.0",
     "react-router": "^7.9.4",
     "react-syntax-highlighter": "^15.6.1",
-    "rehype-highlight": "^7.0.2",
     "remark-gfm": "^4.0.1",
     "shared": "workspace:*",
     "tailwindcss": "^4.1.11",
@@ -56,4 +55,4 @@
     "typescript": "^5.8.3",
     "vite": "^7.0.5"
   }
-}
+}

docs/src/components/MdxComponents.tsx

@@ -4,10 +4,12 @@ import type { MDXComponents } from 'mdx/types'
 import Zoom from 'react-medium-image-zoom'
 import { Link } from 'shared'
 
+import Code from './Code'
+
 const HashIcon = ({ className }: { className?: string }) => (
   <Icon
     className={clsx(
-      'text-custom-500 stroke-custom-500 top-1/2 -left-6 stroke-[1px]! sm:absolute sm:-left-8 sm:-translate-y-1/2',
+      'text-custom-500 stroke-custom-500 top-1/2 -left-6 stroke-[1px]! in-[.alert]:hidden sm:absolute sm:-left-8 sm:-translate-y-1/2',
       className
     )}
     icon="streamline-sharp:sign-hashtag-remix"
@@ -94,12 +96,16 @@ export const components: MDXComponents = {
       />
     )
   },
-  code() {
-    return (
-      <div className="text-5xl text-red-500">
-        USE CUSTOM COMPONENT FOR CODE SNIPPET
-      </div>
-    )
+  code(properties) {
+    if (properties.className) {
+      return (
+        <Code language={properties.className.replace('language-', '')}>
+          {properties.children as string}
+        </Code>
+      )
+    }
+
+    return <code>{properties.children}</code>
   },
   table(properties) {
     return (

docs/vite.config.ts

@@ -1,4 +1,4 @@
-import mdx from '@mdx-js/rollup'
+import mdx, { Options } from '@mdx-js/rollup'
 import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react'
 import path from 'node:path'
@@ -6,9 +6,8 @@ import rehypeHighlight from 'rehype-highlight'
 import remarkGfm from 'remark-gfm'
 import { defineConfig } from 'vite'
 
-const options = {
-  remarkPlugins: [remarkGfm],
-  rehypePlugins: [rehypeHighlight]
+const options: Options = {
+  remarkPlugins: [remarkGfm]
 }
 
 // https://vitejs.dev/config/