fix: add lineNumbers property to shiki client component

Author: pheralb

apps/website/src/components/code-block/client/shiki.tsx

@@ -8,11 +8,13 @@ import { highlight, Themes, type Languages } from "@/utils/shiki/highlight";
 interface CodeblockClientShikiProps extends ComponentProps<"div"> {
   code: string;
   language?: Languages;
+  lineNumbers?: boolean;
 }
 
 const CodeblockShiki = ({
   code,
   language = "tsx",
+  lineNumbers = false,
   className,
   ...props
 }: CodeblockClientShikiProps) => {
@@ -31,11 +33,22 @@ const CodeblockShiki = ({
           light: Themes.light,
           dark: Themes.dark,
         },
+        transformers: [
+          {
+            name: "AddLineNumbers",
+            pre(node) {
+              if (lineNumbers) {
+                const shikiStyles = node.properties.class;
+                node.properties.class = `${shikiStyles} shiki-line-numbers`;
+              }
+            },
+          },
+        ],
       });
       setHighlightedHtml(html);
     }
     void clientHighlight();
-  }, [code, language]);
+  }, [code, language, lineNumbers]);
 
   const classNames = cn("w-full overflow-x-auto", className);