frontend-markdown-renderinglisted

# Frontend Markdown Rendering ## 核心原则 - 只把最终 assistant 文本当 Markdown 渲染。 - 工具调用、工具输出、中间 trace、错误日志、JSON payload 和流式过程仍按纯文本或 JSON 展示。 - 不要自己手写完整 Markdown parser；组合成熟库。 - Markdown HTML 插入前必须清洗，避免直接插入不可信 HTML。 - 本地 workspace 图片必须通过受 token 保护的后端路由读取，不能直接暴露任意文件路径。 - 图片、表格、Mermaid SVG 都必须限制宽度，避免撑爆右侧或移动端布局。 推荐库： - Markdown：`marked` - HTML 安全：`DOMPurify` - 数学公式：`KaTeX` - 流程图：`Mermaid` - 本地图片：后端自建 `/api/workspace-file` 路由 ## CDN 依赖 前端可以直接使用 CDN： ```html <script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.6/dist/purify.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/marked@15.0.12/marked.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid@11.12.0/dist/mermaid.min.js"></script> ``` 如果页面需要 KaTeX 样式，同时引入 CSS： ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css"> ``` 如果使用 Mermaid，初始化一次： ```js mermaid.initialize({ startOnLoad: false, securityLevel: 'strict', theme: 'default' }); ``` ## 库版本与源码追溯 - `marked`、`DOMPurify`、`KaTeX`、`Mermaid` 行为会随版本变化；渲染异常时先确认页面实际加载版本。 - CDN URL 中固定版本号，不要使用无版本 latest。 - 本地项目若通过 npm 管理依赖，可用 `require.resolve(...)` 定位源码入口。 - 源码只用于阅读和定位问题，不要改源码，不要直接改 CDN 压缩文件或 `node_modules`；需要 patch 时写项目侧 wrapper/helper，并保留最小复现。 ```js console.log('marked', marked?.version || marked); console.log('DOMPurify',