docs: add transformerMetaHighlight (#733)

apps/docs/content/docs/ui/shadcn-ui/Scrollbar.mdx

@@ -38,22 +38,22 @@ Add the following CSS to your `globals.css`:
 
 The resulting MyThread component should look like this:
 
-```tsx
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"; // [!code highlight]
-import { ScrollBar } from "@/components/ui/scroll-area"; // [!code highlight]
+```tsx {1-2,6,8,12-13,15}
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { ScrollBar } from "@/components/ui/scroll-area";
 
 const MyThread: FC = () => {
   return (
-    <ScrollAreaPrimitive.Root asChild> /* [!code highlight] */
+    <ScrollAreaPrimitive.Root asChild>
       <ThreadPrimitive.Root className="...">
-        <ScrollAreaPrimitive.Viewport className="thread-viewport" asChild>  /* [!code highlight] */
+        <ScrollAreaPrimitive.Viewport className="thread-viewport" asChild>
           <ThreadPrimitive.Viewport className="...">
             ...
           </ThreadPrimitive.Viewport>
-        </ScrollAreaPrimitive.Viewport> /* [!code highlight] */
-        <ScrollBar /> /* [!code highlight] */
+        </ScrollAreaPrimitive.Viewport>
+        <ScrollBar />
       </ThreadPrimitive.Root>
-    </ScrollAreaPrimitive.Root>  /* [!code highlight] */
+    </ScrollAreaPrimitive.Root>
   );
 };
 ```

apps/docs/next.config.mjs

@@ -1,12 +1,14 @@
 import createMDX from "fumadocs-mdx/config";
 import { rehypeCodeDefaultOptions } from "fumadocs-core/mdx-plugins";
 import { transformerTwoslash } from "fumadocs-twoslash";
+import { transformerMetaHighlight } from "@shikijs/transformers";
 
 const withMDX = createMDX({
   mdxOptions: {
     rehypeCodeOptions: {
       transformers: [
         ...rehypeCodeDefaultOptions.transformers,
+        transformerMetaHighlight(),
         transformerTwoslash({
           twoslashOptions: {
             compilerOptions: {

apps/docs/package.json

@@ -24,6 +24,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@radix-ui/themes": "^3.1.3",
+    "@shikijs/transformers": "^1.16.2",
     "ai": "^3.3.21",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",