From 76747298049054358a6793bbbd2bcb6d14d39f1f Mon Sep 17 00:00:00 2001
From: QihuAI Design <ai@qihuyun.com>
Date: Mon, 20 Jul 2026 20:32:36 +0800
Subject: [PATCH] test(frontend): extract Markdown renderer to
 utils/markdown.ts + add vitest regression tests

---
 frontend/src/pages/front/ChatPage.tsx | 193 ++----------------------
 frontend/src/utils/markdown.test.ts   |  80 ++++++++++
 frontend/src/utils/markdown.ts        | 205 ++++++++++++++++++++++++++
 3 files changed, 294 insertions(+), 184 deletions(-)
 create mode 100644 frontend/src/utils/markdown.test.ts
 create mode 100644 frontend/src/utils/markdown.ts

diff --git a/frontend/src/pages/front/ChatPage.tsx b/frontend/src/pages/front/ChatPage.tsx
index edc3b06..bacbd3b 100644
--- a/frontend/src/pages/front/ChatPage.tsx
+++ b/frontend/src/pages/front/ChatPage.tsx
@@ -6,9 +6,7 @@ import type { Conversation, Message } from '@/types';
 import './ChatPage.css';
 
 // ===== 增强渲染依赖 =====
-import hljs from 'highlight.js';
 import 'highlight.js/styles/github.css';
-import katex from 'katex';
 import 'katex/dist/katex.min.css';
 import mermaid from 'mermaid';
 
@@ -16,7 +14,7 @@ mermaid.initialize({ startOnLoad: false, theme: 'default' });
 
 // ===== Enhanced Markdown Renderer =====
 // 媒体(图片/视频)以受限缩略图呈现，并提供下载(格式+尺寸)选项
-interface MediaInfo { type: 'img' | 'video'; src: string; alt?: string; }
+import { renderMarkdownToHtml, MediaInfo } from '@/utils/markdown';
 
 // 全屏灯箱预览
 const ChatLightbox: React.FC<{ src: string; type: 'img' | 'video'; onClose: () => void }> = ({ src, type, onClose }) => {
@@ -154,182 +152,17 @@ const ChatMedia: React.FC<{ info: MediaInfo }> = ({ info }) => {
 };
 
 const MarkdownContent: React.FC<{ content: string }> = ({ content }) => {
+  // 渲染管线（代码块/加粗/表格/换行/媒体占位符等）已抽到 src/utils/markdown.ts，
+  // 组件只负责把返回的 html 切分为「文本片段 + 媒体组件」。
+  const { html, media } = useMemo(() => renderMarkdownToHtml(content), [content]);
+
   const nodes = useMemo(() => {
-    let text = content;
-
-    // 1. Extract code blocks first (protect from other replacements)
-    const codeBlocks: string[] = [];
-    const mermaidBlocks: string[] = [];
-    text = text.replace(/```(\w*)\n?([\s\S]*?)```/g, (_m: string, _lang: string, code: string) => {
-      if (_lang === 'mermaid') {
-        const idx = mermaidBlocks.length;
-        mermaidBlocks.push('<div class="md-mermaid" data-code="' + escapeHtml(code.trim()) + '"></div>');
-        return '\x00MERMAID' + idx + '\x00';
-      }
-      const idx = codeBlocks.length;
-      codeBlocks.push('<pre class="md-code-block"><code class="md-code">' + escapeHtml(code.trim()) + '</code></pre>');
-      return '\x00CODEBLOCK' + idx + '\x00';
-    });
-
-    // 2. Extract inline code
-    const inlineCodes: string[] = [];
-    text = text.replace(/`([^`]+)`/g, (_m: string, code: string) => {
-      const idx = inlineCodes.length;
-      inlineCodes.push('<code class="md-inline-code">' + escapeHtml(code) + '</code>');
-      return '\x00INLINE' + idx + '\x00';
-    });
-
-    // 2.5 Extract media blocks (<img>/<video>) → 结构化，后续渲染为 React 组件
-    const mediaBlocks: MediaInfo[] = [];
-    text = text.replace(/<(img|video)([^>]*?)\/?>/gi, (_m: string, tag: string, attrs: string) => {
-      const type = tag.toLowerCase() === 'img' ? 'img' : 'video';
-      const srcM = attrs.match(/src=["']([^"']+)["']/i);
-      const altM = attrs.match(/alt=["']([^"']*)["']/i);
-      mediaBlocks.push({ type, src: srcM ? srcM[1] : '', alt: altM ? altM[1] : '' });
-      return '\x00MEDIA' + (mediaBlocks.length - 1) + '\x00';
-    });
-
-    // 2.6 Normalize excessive blank lines in prose (code blocks already extracted)
-    text = text.replace(/\n{3,}/g, '\n\n').trim();
-
-    // 2.8 LaTeX 数学公式：$$...$$（块级）和 $...$（行内）
-    // 提取为占位符，渲染后用 KaTeX 处理
-    const mathBlocks: string[] = [];
-    text = text.replace(/\$\$([\s\S]+?)\$\$/g, (_m: string, formula: string) => {
-      try {
-        const rendered = katex.renderToString(formula.trim(), { displayMode: true, throwOnError: false });
-        const idx = mathBlocks.length;
-        mathBlocks.push(`<div class="md-math-block">${rendered}</div>`);
-        return '\x00MATHBLOCK' + idx + '\x00';
-      } catch { return _m; }
-    });
-    text = text.replace(/\$([^\s$][^$]*[^\s$])\$/g, (_m: string, formula: string) => {
-      try {
-        const rendered = katex.renderToString(formula.trim(), { displayMode: false, throwOnError: false });
-        const idx = mathBlocks.length;
-        mathBlocks.push(`<span class="md-math-inline">${rendered}</span>`);
-        return '\x00MATHBLOCK' + idx + '\x00';
-      } catch { return _m; }
-    });
-
-    // 2.9 Strikethrough: ~~text~~ → <del>text</del>
-    text = text.replace(/~~(.+?)~~/g, '<del>$1</del>');
-
-    // 2.10 Auto-link bare URLs: http(s)://... → <a>
-    text = text.replace(/(?<![="'>])https?:\/\/[^\s<>[\]()]+/g, (url: string) =>
-      `<a class="md-link" href="${url}" target="_blank" rel="noopener">${url}</a>`
-    );
-
-    // 3. Headers
-    text = text.replace(/^#### (.+)$/gm, '<h4 class="md-h4">$1</h4>');
-    text = text.replace(/^### (.+)$/gm, '<h4 class="md-h4">$1</h4>');
-    text = text.replace(/^## (.+)$/gm, '<h3 class="md-h3">$1</h3>');
-    text = text.replace(/^# (.+)$/gm, '<h2 class="md-h2">$1</h2>');
-
-    // 4. Horizontal rule
-    text = text.replace(/^---+$/gm, '<hr class="md-hr">');
-
-    // 5. Blockquotes
-    text = text.replace(/^> (.+)$/gm, '<blockquote class="md-blockquote">$1</blockquote>');
-
-    // 6. Links [text](url)
-    text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a class="md-link" href="$2" target="_blank" rel="noopener">$1</a>');
-
-    // 7. Bold and italic
-    text = text.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
-    text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
-    text = text.replace(/(?<!\w)\*(?!\*)(.+?)(?<!\*)\*(?!\w)/g, '<em>$1</em>');
-
-    // 7.5 Extract Markdown tables after inline formatting so cells support bold/italic/links.
-    // 表格提取放在加粗/链接之后，避免单元格内 **xxx** 原样显示；同时压缩单元格内多余 <br>。
-    const tableBlocks: string[] = [];
-    text = text.replace(
-      /((?:^\|.+\|\r?\n)+^\|[\s\-:|]+\|\r?\n(?:^\|.+\|\r?\n?)+)/gm,
-      (_m: string, block: string) => {
-        const lines = block.trim().split(/\r?\n/).filter((l: string) => l.trim());
-        if (lines.length < 2) return block;
-        const headerCells = lines[0].split('|').slice(1, -1).map((c: string) => c.trim());
-        const alignCells = lines[1].split('|').slice(1, -1).map((c: string) => {
-          const t = c.trim();
-          const left = t.startsWith(':');
-          const right = t.endsWith(':');
-          if (left && right) return 'center';
-          if (right) return 'right';
-          if (left) return 'left';
-          return 'left';
-        });
-        const normalizeCell = (cell: string) => {
-          return cell
-            .replace(/<br\s*\/?>\s*/gi, '<br/>')
-            .replace(/\n/g, '<br/>')
-            .replace(/(<br\/>){2,}/g, '<br/>')
-            .replace(/^(<br\/>)+|(<br\/>)+$/g, '');
-        };
-        const bodyRows = lines.slice(2).map((row: string) =>
-          row.split('|').slice(1, -1).map((c: string) => normalizeCell(c.trim()))
-        );
-        const thead = headerCells.map((c: string, i: number) =>
-          `<th style="text-align:${alignCells[i] || 'left'}">${normalizeCell(c)}</th>`
-        ).join('');
-        const tbody = bodyRows.map((r: string[]) =>
-          '<tr>' + r.map((c: string, i: number) =>
-            `<td style="text-align:${alignCells[i] || 'left'}">${c}</td>`
-          ).join('') + '</tr>'
-        ).join('');
-        const html = `<table class="md-table"><thead><tr>${thead}</tr></thead><tbody>${tbody}</tbody></table>`;
-        const idx = tableBlocks.length;
-        tableBlocks.push(html);
-        return '\x00TABLE' + idx + '\x00';
-      }
-    );
-
-    // 8. Lists
-    text = text.replace(/^\s*[-*] (.+)$/gm, '<li class="md-li">$1</li>');
-    text = text.replace(/^\s*\d+\. (.+)$/gm, '<li class="md-li">$1</li>');
-    // Wrap consecutive <li> in <ul>
-    text = text.replace(/((?:<li class="md-li">[\s\S]*?<\/li>\n?)+)/g, '<ul class="md-ul">$1</ul>');
-
-    // 9. Convert double newlines to paragraph breaks, single newlines to spaces
-    text = text.replace(/\n\n/g, '</p><p class="md-p">');
-    text = text.replace(/\n/g, ' ');
-
-    // 10. Restore code blocks and inline codes
-    text = text.replace(/\x00CODEBLOCK(\d+)\x00/g, (_m: string, idx: string) => codeBlocks[parseInt(idx)] || '');
-    text = text.replace(/\x00MERMAID(\d+)\x00/g, (_m: string, idx: string) => mermaidBlocks[parseInt(idx)] || '');
-    text = text.replace(/\x00INLINE(\d+)\x00/g, (_m: string, idx: string) => inlineCodes[parseInt(idx)] || '');
-    text = text.replace(/\x00TABLE(\d+)\x00/g, (_m: string, idx: string) => tableBlocks[parseInt(idx)] || '');
-    text = text.replace(/\x00MATHBLOCK(\d+)\x00/g, (_m: string, idx: string) => mathBlocks[parseInt(idx)] || '');
-
-    // 10.5 Apply syntax highlighting to code blocks + add copy button
-    text = text.replace(
-      /<pre class="md-code-block"><code class="md-code">([\s\S]*?)<\/code><\/pre>/g,
-      (_m: string, code: string) => {
-        const decoded = code.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
-        let highlighted: string;
-        try { highlighted = hljs.highlightAuto(decoded).value; } catch { highlighted = code; }
-        return `<div class="md-code-wrapper">
-          <button class="md-code-copy" onclick="navigator.clipboard.writeText(this.parentElement.querySelector('code').textContent);this.textContent='已复制';setTimeout(()=>this.textContent='复制',2000)">复制</button>
-          <pre class="md-code-block"><code class="md-code hljs">${highlighted}</code></pre>
-        </div>`;
-      }
-    );
-
-    // 11. Wrap in paragraph and clean up
-    text = '<p class="md-p">' + text + '</p>';
-    text = text.replace(/<p class="md-p"><\/p>/g, '');
-    text = text.replace(/<p class="md-p">(<h[234][\s\S]*?<\/h[234]>)<\/p>/g, '$1');
-    text = text.replace(/<p class="md-p">(<pre[\s\S]*?<\/pre>)<\/p>/g, '$1');
-    text = text.replace(/<p class="md-p">(<ul[\s\S]*?<\/ul>)<\/p>/g, '$1');
-    text = text.replace(/<p class="md-p">(<hr[\s\S]*?)<\/p>/g, '$1');
-    text = text.replace(/<p class="md-p">(<blockquote[\s\S]*?<\/blockquote>)<\/p>/g, '$1');
-    text = text.replace(/<p class="md-p">(<table[\s\S]*?<\/table>)<\/p>/g, '$1');
-
-    // 12. 拆分为文本片段与媒体组件
-    const parts = text.split(/(\x00MEDIA\d+\x00)/g);
+    // 12. 拆分为文本片段与媒体组件（媒体以 \x00MEDIA<n>\x00 占位符保留在 html 中）
+    const parts = html.split(/(\x00MEDIA\d+\x00)/g);
     return parts.map((part: string, i: number) => {
       const m = part.match(/^\x00MEDIA(\d+)\x00$/);
       if (m) {
-        const info = mediaBlocks[parseInt(m[1])];
+        const info = media[parseInt(m[1])];
         if (info && info.src) return <ChatMedia key={'m' + i} info={info} />;
         return null;
       }
@@ -339,7 +172,7 @@ const MarkdownContent: React.FC<{ content: string }> = ({ content }) => {
       if (!s.trim()) return null;
       return <div key={'t' + i} className="md-text-seg" dangerouslySetInnerHTML={{ __html: s }} />;
     });
-  }, [content]);
+  }, [html, media]);
 
   const containerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -397,14 +230,6 @@ const ClarifyCard: React.FC<{ data: { prompt: string; options: any[] }; onChoose
 };
 
 
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
-}
-
 // ===== Time Formatting =====
 function formatTime(iso: string): string {
   return formatChatTime(iso);
diff --git a/frontend/src/utils/markdown.test.ts b/frontend/src/utils/markdown.test.ts
new file mode 100644
index 0000000..1c9d42e
--- /dev/null
+++ b/frontend/src/utils/markdown.test.ts
@@ -0,0 +1,80 @@
+import { describe, it, expect } from 'vitest';
+import { renderMarkdownToHtml } from './markdown';
+
+// 前台聊天 Markdown 渲染曾两次被 bug 击穿：
+//  1) 段落内单个 \n 被转成 <br/>，导致 AI 回复被强制大量换行、内容撑成多行；
+//  2) 表格在加粗/链接转换之前被提取，单元格内 **xxx** 原样显示、且 <br> 未压缩。
+// 本测试固化「渲染管线」契约，防止回归。管线代码见 ./markdown.ts（从 ChatPage 抽出）。
+describe('renderMarkdownToHtml', () => {
+  it('段落内单个 \\n 转为空格（而非 <br/>）', () => {
+    const { html } = renderMarkdownToHtml('第一行\n第二行');
+    expect(html).not.toContain('<br');
+    expect(html).toContain('第一行 第二行');
+  });
+
+  it('双换行转为段落分隔', () => {
+    const { html } = renderMarkdownToHtml('段一\n\n段二');
+    expect(html).toContain('段一</p><p class="md-p">段二');
+  });
+
+  it('3+ 连续空行压缩为 2 个（与 2 个空行结果一致）', () => {
+    const many = renderMarkdownToHtml('a\n\n\n\n\nb').html;
+    const few = renderMarkdownToHtml('a\n\nb').html;
+    expect(many).toBe(few);
+    expect(many).toContain('a</p><p class="md-p">b');
+  });
+
+  it('表格在加粗之后提取，单元格内的 **xxx** 被渲染为 <strong>', () => {
+    const input = '| 能力 | 说明 |\n| --- | --- |\n| **渠道排序** | 按优先级 |\n';
+    const { html } = renderMarkdownToHtml(input);
+    expect(html).toContain('<table class="md-table">');
+    expect(html).toContain('<th');
+    expect(html).toContain('<td');
+    expect(html).toContain('<strong>渠道排序</strong>');
+  });
+
+  it('单元格内连续 <br> 被压缩为单个', () => {
+    const input = '| 列 |\n| --- |\n| a<br/><br/>b |\n';
+    const { html } = renderMarkdownToHtml(input);
+    expect(html).toContain('a<br/>b');
+    expect(html).not.toContain('<br/><br/>');
+  });
+
+  it('无序列表渲染为 <ul><li>', () => {
+    const { html } = renderMarkdownToHtml('- a\n- b');
+    expect(html).toContain('<ul class="md-ul">');
+    expect(html).toContain('<li class="md-li">a</li>');
+    expect(html).toContain('<li class="md-li">b</li>');
+  });
+
+  it('一级标题渲染为 h2', () => {
+    const { html } = renderMarkdownToHtml('# Title');
+    expect(html).toContain('<h2 class="md-h2">Title</h2>');
+  });
+
+  it('代码块内容不被行内加粗转换', () => {
+    const { html } = renderMarkdownToHtml('```\n**not bold**\n```');
+    expect(html).toContain('<pre class="md-code-block">');
+    expect(html).not.toContain('<strong>not bold</strong>');
+  });
+
+  it('行内代码被抽取保护', () => {
+    const { html } = renderMarkdownToHtml('use `npm run` here');
+    expect(html).toContain('<code class="md-inline-code">npm run</code>');
+  });
+
+  it('[文本](url) 链接渲染', () => {
+    const { html } = renderMarkdownToHtml('[Google](https://g.com)');
+    expect(html).toContain('<a class="md-link" href="https://g.com"');
+    expect(html).toContain('Google');
+  });
+
+  it('媒体(<img>)以占位符保留并返回结构化 media 列表', () => {
+    const { html, media } = renderMarkdownToHtml('看这张图 <img src="https://x.com/a.png" alt="图">');
+    expect(media.length).toBe(1);
+    expect(media[0].type).toBe('img');
+    expect(media[0].src).toBe('https://x.com/a.png');
+    expect(media[0].alt).toBe('图');
+    expect(html).toContain('\x00MEDIA0\x00');
+  });
+});
diff --git a/frontend/src/utils/markdown.ts b/frontend/src/utils/markdown.ts
new file mode 100644
index 0000000..c7105cd
--- /dev/null
+++ b/frontend/src/utils/markdown.ts
@@ -0,0 +1,205 @@
+import katex from 'katex';
+import hljs from 'highlight.js';
+
+export interface MediaInfo {
+  type: 'img' | 'video';
+  src: string;
+  alt?: string;
+}
+
+export interface RenderResult {
+  html: string;
+  media: MediaInfo[];
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+/**
+ * 将 Markdown 文本转为带占位符的 HTML 字符串。
+ *
+ * 设计契约（曾被线上 bug 击穿、用单测固化，见 markdown.test.ts）：
+ *  - 段落内【单个 \n 转为空格】而非 <br/>，避免 AI 回复被强制大量换行；
+ *  - 【3+ 连续空行压缩为 2 个】（/\n{3,}/ -> \n\n），避免多余空白把内容撑成多行；
+ *  - 【表格在加粗/链接转换之后提取】，单元格内的 **xxx** / [文本](url) 才能被渲染；
+ *    且单元格内连续 <br> 被压缩为单个（normalizeCell）。
+ *
+ * 媒体(<img>/<video>)以 \x00MEDIA<n>\x00 占位符保留在返回的 html 中，
+ * 由调用方（ChatPage 的 MarkdownContent）切分后渲染为 React 组件。
+ */
+export function renderMarkdownToHtml(content: string): RenderResult {
+  let text = content;
+
+  // 1. Extract code blocks first (protect from other replacements)
+  const codeBlocks: string[] = [];
+  const mermaidBlocks: string[] = [];
+  text = text.replace(/```(\w*)\n?([\s\S]*?)```/g, (_m: string, _lang: string, code: string) => {
+    if (_lang === 'mermaid') {
+      const idx = mermaidBlocks.length;
+      mermaidBlocks.push('<div class="md-mermaid" data-code="' + escapeHtml(code.trim()) + '"></div>');
+      return '\x00MERMAID' + idx + '\x00';
+    }
+    const idx = codeBlocks.length;
+    codeBlocks.push('<pre class="md-code-block"><code class="md-code">' + escapeHtml(code.trim()) + '</code></pre>');
+    return '\x00CODEBLOCK' + idx + '\x00';
+  });
+
+  // 2. Extract inline code
+  const inlineCodes: string[] = [];
+  text = text.replace(/`([^`]+)`/g, (_m: string, code: string) => {
+    const idx = inlineCodes.length;
+    inlineCodes.push('<code class="md-inline-code">' + escapeHtml(code) + '</code>');
+    return '\x00INLINE' + idx + '\x00';
+  });
+
+  // 2.5 Extract media blocks (<img>/<video>) -> 结构化，后续渲染为 React 组件
+  const mediaBlocks: MediaInfo[] = [];
+  text = text.replace(/<(img|video)([^>]*?)\/?>/gi, (_m: string, tag: string, attrs: string) => {
+    const type = tag.toLowerCase() === 'img' ? 'img' : 'video';
+    const srcM = attrs.match(/src=["']([^"']+)["']/i);
+    const altM = attrs.match(/alt=["']([^"']*)["']/i);
+    mediaBlocks.push({ type, src: srcM ? srcM[1] : '', alt: altM ? altM[1] : '' });
+    return '\x00MEDIA' + (mediaBlocks.length - 1) + '\x00';
+  });
+
+  // 2.6 Normalize excessive blank lines in prose (code blocks already extracted)
+  text = text.replace(/\n{3,}/g, '\n\n').trim();
+
+  // 2.8 LaTeX 数学公式：$$...$$（块级）和 $...$（行内）
+  const mathBlocks: string[] = [];
+  text = text.replace(/\$\$([\s\S]+?)\$\$/g, (_m: string, formula: string) => {
+    try {
+      const rendered = katex.renderToString(formula.trim(), { displayMode: true, throwOnError: false });
+      const idx = mathBlocks.length;
+      mathBlocks.push(`<div class="md-math-block">${rendered}</div>`);
+      return '\x00MATHBLOCK' + idx + '\x00';
+    } catch { return _m; }
+  });
+  text = text.replace(/\$([^\s$][^$]*[^\s$])\$/g, (_m: string, formula: string) => {
+    try {
+      const rendered = katex.renderToString(formula.trim(), { displayMode: false, throwOnError: false });
+      const idx = mathBlocks.length;
+      mathBlocks.push(`<span class="md-math-inline">${rendered}</span>`);
+      return '\x00MATHBLOCK' + idx + '\x00';
+    } catch { return _m; }
+  });
+
+  // 2.9 Strikethrough: ~~text~~ -> <del>text</del>
+  text = text.replace(/~~(.+?)~~/g, '<del>$1</del>');
+
+  // 2.10 Auto-link bare URLs: http(s)://... -> <a>
+  text = text.replace(/(?<![="'>])https?:\/\/[^\s<>[\]()]+/g, (url: string) =>
+    `<a class="md-link" href="${url}" target="_blank" rel="noopener">${url}</a>`
+  );
+
+  // 3. Headers
+  text = text.replace(/^#### (.+)$/gm, '<h4 class="md-h4">$1</h4>');
+  text = text.replace(/^### (.+)$/gm, '<h4 class="md-h4">$1</h4>');
+  text = text.replace(/^## (.+)$/gm, '<h3 class="md-h3">$1</h3>');
+  text = text.replace(/^# (.+)$/gm, '<h2 class="md-h2">$1</h2>');
+
+  // 4. Horizontal rule
+  text = text.replace(/^---+$/gm, '<hr class="md-hr">');
+
+  // 5. Blockquotes
+  text = text.replace(/^> (.+)$/gm, '<blockquote class="md-blockquote">$1</blockquote>');
+
+  // 6. Links [text](url)
+  text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a class="md-link" href="$2" target="_blank" rel="noopener">$1</a>');
+
+  // 7. Bold and italic
+  text = text.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+  text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  text = text.replace(/(?<!\w)\*(?!\*)(.+?)(?<!\*)\*(?!\w)/g, '<em>$1</em>');
+
+  // 7.5 Extract Markdown tables after inline formatting so cells support bold/italic/links.
+  // 表格提取放在加粗/链接之后，避免单元格内 **xxx** 原样显示；同时压缩单元格内多余 <br>。
+  const tableBlocks: string[] = [];
+  text = text.replace(
+    /((?:^\|.+\|\r?\n)+^\|[\s\-:|]+\|\r?\n(?:^\|.+\|\r?\n?)+)/gm,
+    (_m: string, block: string) => {
+      const lines = block.trim().split(/\r?\n/).filter((l: string) => l.trim());
+      if (lines.length < 2) return block;
+      const headerCells = lines[0].split('|').slice(1, -1).map((c: string) => c.trim());
+      const alignCells = lines[1].split('|').slice(1, -1).map((c: string) => {
+        const t = c.trim();
+        const left = t.startsWith(':');
+        const right = t.endsWith(':');
+        if (left && right) return 'center';
+        if (right) return 'right';
+        if (left) return 'left';
+        return 'left';
+      });
+      const normalizeCell = (cell: string) => {
+        return cell
+          .replace(/<br\s*\/?>\s*/gi, '<br/>')
+          .replace(/\n/g, '<br/>')
+          .replace(/(<br\/>){2,}/g, '<br/>')
+          .replace(/^(<br\/>)+|(<br\/>)+$/g, '');
+      };
+      const bodyRows = lines.slice(2).map((row: string) =>
+        row.split('|').slice(1, -1).map((c: string) => normalizeCell(c.trim()))
+      );
+      const thead = headerCells.map((c: string, i: number) =>
+        `<th style="text-align:${alignCells[i] || 'left'}">${normalizeCell(c)}</th>`
+      ).join('');
+      const tbody = bodyRows.map((r: string[]) =>
+        '<tr>' + r.map((c: string, i: number) =>
+          `<td style="text-align:${alignCells[i] || 'left'}">${c}</td>`
+        ).join('') + '</tr>'
+      ).join('');
+      const html = `<table class="md-table"><thead><tr>${thead}</tr></thead><tbody>${tbody}</tbody></table>`;
+      const idx = tableBlocks.length;
+      tableBlocks.push(html);
+      return '\x00TABLE' + idx + '\x00';
+    }
+  );
+
+  // 8. Lists
+  text = text.replace(/^\s*[-*] (.+)$/gm, '<li class="md-li">$1</li>');
+  text = text.replace(/^\s*\d+\. (.+)$/gm, '<li class="md-li">$1</li>');
+  // Wrap consecutive <li> in <ul>
+  text = text.replace(/((?:<li class="md-li">[\s\S]*?<\/li>\n?)+)/g, '<ul class="md-ul">$1</ul>');
+
+  // 9. Convert double newlines to paragraph breaks, single newlines to spaces
+  text = text.replace(/\n\n/g, '</p><p class="md-p">');
+  text = text.replace(/\n/g, ' ');
+
+  // 10. Restore code blocks and inline codes
+  text = text.replace(/\x00CODEBLOCK(\d+)\x00/g, (_m: string, idx: string) => codeBlocks[parseInt(idx)] || '');
+  text = text.replace(/\x00MERMAID(\d+)\x00/g, (_m: string, idx: string) => mermaidBlocks[parseInt(idx)] || '');
+  text = text.replace(/\x00INLINE(\d+)\x00/g, (_m: string, idx: string) => inlineCodes[parseInt(idx)] || '');
+  text = text.replace(/\x00TABLE(\d+)\x00/g, (_m: string, idx: string) => tableBlocks[parseInt(idx)] || '');
+  text = text.replace(/\x00MATHBLOCK(\d+)\x00/g, (_m: string, idx: string) => mathBlocks[parseInt(idx)] || '');
+
+  // 10.5 Apply syntax highlighting to code blocks + add copy button
+  text = text.replace(
+    /<pre class="md-code-block"><code class="md-code">([\s\S]*?)<\/code><\/pre>/g,
+    (_m: string, code: string) => {
+      const decoded = code.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
+      let highlighted: string;
+      try { highlighted = hljs.highlightAuto(decoded).value; } catch { highlighted = code; }
+      return `<div class="md-code-wrapper">
+        <button class="md-code-copy" onclick="navigator.clipboard.writeText(this.parentElement.querySelector('code').textContent);this.textContent='已复制';setTimeout(()=>this.textContent='复制',2000)">复制</button>
+        <pre class="md-code-block"><code class="md-code hljs">${highlighted}</code></pre>
+      </div>`;
+    }
+  );
+
+  // 11. Wrap in paragraph and clean up
+  text = '<p class="md-p">' + text + '</p>';
+  text = text.replace(/<p class="md-p"><\/p>/g, '');
+  text = text.replace(/<p class="md-p">(<h[234][\s\S]*?<\/h[234]>)<\/p>/g, '$1');
+  text = text.replace(/<p class="md-p">(<pre[\s\S]*?<\/pre>)<\/p>/g, '$1');
+  text = text.replace(/<p class="md-p">(<ul[\s\S]*?<\/ul>)<\/p>/g, '$1');
+  text = text.replace(/<p class="md-p">(<hr[\s\S]*?)<\/p>/g, '$1');
+  text = text.replace(/<p class="md-p">(<blockquote[\s\S]*?<\/blockquote>)<\/p>/g, '$1');
+  text = text.replace(/<p class="md-p">(<table[\s\S]*?<\/table>)<\/p>/g, '$1');
+
+  return { html: text, media: mediaBlocks };
+}