fix(packages/components/src): MDX indentation

Co-authored-by: Copilot <copilot@github.com>

Author: code-qtzl

packages/components/src/components/code-block/code-block.stories.tsx

@@ -464,3 +464,43 @@ export const WithCustomClassName: Story = {
     </CodeBlock>
   ),
 };
+
+export const MDXIndents: Story = {
+  render: () => (
+    <CodeBlock filename="example.ts" language="ts">
+      {`import {
+        a,
+        b,
+      } from 'pkg';
+
+      async function main() {
+        console.log('hello');
+      }`}
+    </CodeBlock>
+  ),
+};
+
+export const MDXIndentsDeeplyNested: Story = {
+  render: () => (
+    <CodeBlock filename="nested.ts" language="ts">
+      {`function outer() {
+        function middle() {
+          function inner() {
+            function deepest() {
+              if (true) {
+                for (let i = 0; i < 10; i++) {
+                  while (i > 0) {
+                    return 42;
+                  }
+                }
+              }
+            }
+            return deepest();
+          }
+          return inner();
+        }
+        return middle();
+      }`}
+    </CodeBlock>
+  ),
+};

packages/components/src/utils/shiki/lib.ts

@@ -3,6 +3,8 @@ import { type ReactNode, useMemo } from "react";
 import { getNodeText } from "@/utils/get-node-text";
 import { SHIKI_CLASSNAME } from "@/utils/shiki/constants";
 
+const lineIndentRegex = /^( *)/;
+
 function findShikiClassName(children: unknown): boolean {
   if (!children || typeof children !== "object") {
     return false;
@@ -37,6 +39,34 @@ function findShikiClassName(children: unknown): boolean {
   return false;
 }
 
+function dedentCode(code: string): string {
+  const lines = code.split("\n");
+  if (lines.length <= 1) {
+    return code;
+  }
+
+  const relevantLines = lines.slice(1).filter((line) => line.trim() !== "");
+  if (relevantLines.length === 0) {
+    return code;
+  }
+
+  const minIndent = Math.min(
+    ...relevantLines.map((line) => {
+      const match = line.match(lineIndentRegex);
+      return match ? match[1].length : 0;
+    })
+  );
+
+  if (minIndent === 0) {
+    return code;
+  }
+
+  return [
+    lines[0],
+    ...lines.slice(1).map((line) => line.slice(minIndent)),
+  ].join("\n");
+}
+
 function getCodeString(
   children: ReactNode,
   className?: string,
@@ -50,7 +80,7 @@ function getCodeString(
 
   const codeString = getNodeText(children);
 
-  return codeString;
+  return dedentCode(codeString);
 }
 
 function calculateCodeLinesFromHtml(html: string | undefined): number {