feat(frontend): Markdown 支持 GFM、代码高亮与图片灯箱

统一 SSR/客户端渲染路径，评论与预览共用增强组件。

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/components/CommentSection.tsx

@@ -4,7 +4,6 @@ import { useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { Trash2, MessagesSquare, ChevronRight, ChevronDown, BadgeCheck } from "lucide-react";
-import ReactMarkdown from "react-markdown";
 import {
   apiCreateComment,
   apiDeleteComment,
@@ -18,6 +17,7 @@ import { canModerateBoard } from "@/lib/roles";
 import { toast } from "@/lib/toast";
 import Avatar from "./Avatar";
 import Pagination from "./Pagination";
+import MarkdownBodyClient from "@/components/MarkdownBodyClient";
 
 interface CommentSectionProps {
   postId: string;
@@ -294,8 +294,11 @@ export default function CommentSection({
                   </>
                 )}
               </div>
-              <div className="prose-content prose-comment mt-0.5">
-                <ReactMarkdown>{c.content}</ReactMarkdown>
+              <div className="mt-0.5">
+                <MarkdownBodyClient
+                  content={c.content}
+                  className="prose-content prose-comment"
+                />
               </div>
               {/* 底部行：时间 · 回复（左），删除（右） */}
               <div className="flex items-center justify-between mt-1.5">
@@ -398,9 +401,10 @@ export default function CommentSection({
                 </a>
               )}
             </div>
-            <div className="prose-content prose-comment">
-              <ReactMarkdown>{c.content}</ReactMarkdown>
-            </div>
+            <MarkdownBodyClient
+              content={c.content}
+              className="prose-content prose-comment"
+            />
             {/* 底部行：时间 · 回复（左），删除（右） */}
             <div className="flex items-center justify-between mt-2">
               <div className="flex items-center gap-3">