问题:Web 文章内联 HTML/CSS 图表在导入后丢失格式
现象
通过浏览器扩展导入的 web 类型文章,如果原文包含内联 HTML/CSS 实现的图表(非 <img> 标签),导入后的 paper.md 中图表被扁平化为纯文本,前端用 ReactMarkdown 渲染后格式混乱,无法正常阅读。
示例
文章 Building a Distributed Search Engine in Pure Go(文档 ID 243):
- 原文中的 goroutine 流程图是一个 styled div(深色背景 + 彩色圆角卡片 + 箭头),导入后变成:
One Agent Query → Five Concurrent Goroutines → Fused Result
QUERY
Agent request
↗— →— →— →— ↘—
go embed(query) ~2ms
go bm25Search(shards...) ~3ms
...
- 性能对比柱状图同样被扁平化为纯文本,失去可视化效果
根因
- 浏览器扩展将原始 HTML 页面转换为 markdown 时,内联 HTML 元素被转为纯文本
- 前端
DocDetail.tsx 中 htmlContent 仅在 sourceType === 'newsletter' 时加载,web 类型文章不会加载保存的 index.html
- 因此前端只能用 ReactMarkdown 渲染 paper.md,内联 HTML 图表丢失
建议方案
方案 A:前端对 web 类型文章也加载并渲染 index.html(与 newsletter 逻辑一致),作为可选的"富文本"视图模式
方案 B:改进导入转换逻辑,对内联 HTML 图表区域进行截图保存为图片,在 paper.md 中引用
方案 C:改进 HTML→Markdown 转换,将结构化 HTML 图表转换为 markdown table 或 mermaid 图等可渲染格式
方案 A 改动最小,因为 index.html 已经随导入一起保存了,只需前端放开加载限制即可。
问题:Web 文章内联 HTML/CSS 图表在导入后丢失格式
现象
通过浏览器扩展导入的 web 类型文章,如果原文包含内联 HTML/CSS 实现的图表(非
<img>标签),导入后的 paper.md 中图表被扁平化为纯文本,前端用 ReactMarkdown 渲染后格式混乱,无法正常阅读。示例
文章 Building a Distributed Search Engine in Pure Go(文档 ID 243):
根因
DocDetail.tsx中htmlContent仅在sourceType === 'newsletter'时加载,web 类型文章不会加载保存的index.html建议方案
方案 A:前端对 web 类型文章也加载并渲染 index.html(与 newsletter 逻辑一致),作为可选的"富文本"视图模式
方案 B:改进导入转换逻辑,对内联 HTML 图表区域进行截图保存为图片,在 paper.md 中引用
方案 C:改进 HTML→Markdown 转换,将结构化 HTML 图表转换为 markdown table 或 mermaid 图等可渲染格式
方案 A 改动最小,因为 index.html 已经随导入一起保存了,只需前端放开加载限制即可。