feat(playground): add Markdown component for enhanced code problem display

package.json

@@ -27,11 +27,13 @@
     "devicons-react": "^1.4.0",
     "dockerode": "^4.0.3",
     "gitea-js": "^1.22.0",
+    "github-markdown-css": "^5.8.1",
     "lucide-react": "^0.469.0",
     "monaco-editor": "0.36.1",
     "monaco-languageclient": "5.0.1",
     "next": "15.1.3",
     "next-auth": "^5.0.0-beta.25",
+    "next-mdx-remote": "^5.0.0",
     "next-themes": "^0.4.4",
     "normalize-url": "~8.0.0",
     "react": "^19.0.0",

src/app/playground/components/markdown.tsx

@@ -0,0 +1,33 @@
+import { Suspense } from "react";
+import { MDXRemote } from "next-mdx-remote/rsc";
+import "github-markdown-css/github-markdown-dark.css";
+
+export default function Markdown() {
+  return (
+    <Suspense fallback={<>Loading...</>}>
+      <div className="h-full w-full p-8 markdown-body">
+        <MDXRemote
+          source={`# 两数之和
+
+## 📝 问题描述
+
+给定一个整数数组 \`nums\` 和一个整数目标值 \`target\`，请你在该数组中找出和为目标值 \`target\` 的那 **两个** 整数，并返回它们的数组下标。
+
+你可以假设每种输入只会对应一个答案。但是，数组中同一个元素不能使用两遍。
+
+你可以按任意顺序返回答案。
+
+## 💡 示例
+
+\`\`\`
+输入：nums = [2, 7, 11, 15], target = 9
+输出：[0, 1]
+解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1]。
+\`\`\`
+
+        `}
+        />
+      </div>
+    </Suspense>
+  );
+}

src/app/playground/layout.tsx

@@ -8,6 +8,7 @@ import Banner from "./components/banner";
 import Terminal from "./components/terminal";
 import Chat from "./components/chat";
 import EditorPanel from "./layout/editor-panel";
+import Markdown from "./components/markdown";
 
 export default function PlaygroundLayout() {
   return (
@@ -16,9 +17,11 @@ export default function PlaygroundLayout() {
       <Tools />
       <div className="flex flex-1 min-h-0">
         <ResizablePanelGroup direction="horizontal">
-          <ResizablePanel defaultSize={25}>One</ResizablePanel>
+          <ResizablePanel defaultSize={30}>
+            <Markdown />
+          </ResizablePanel>
           <ResizableHandle className="bg-[#3e4452]" />
-          <ResizablePanel defaultSize={50}>
+          <ResizablePanel defaultSize={45}>
             <ResizablePanelGroup direction="vertical">
               <ResizablePanel defaultSize={75}>
                 <ResizablePanelGroup direction="horizontal">