前阵子给内部工具接 AI 流式输出，模型吐出来的是 Markdown，前端要边收边渲染。功能做完回头看，踩的坑几乎都不在"编辑器"上，全在渲染管线里。这篇把过程和结论记一下，顺便回答"markdown在线编辑器到底怎么选"。
一、渲染器的两阶段管线
主流渲染器（marked、markdown-it、remark 这一系）的解析都分两个阶段：
- 块级解析（block）：按空行把文本切成段落、ATX 标题、围栏代码块、列表、引用块、表格；
- 行内解析（inline）：在块内部处理链接、强调、行内代码、图片。
这个顺序很关键：块级边界（比如围栏代码块）会改变行内符号的含义。先跑行内解析再分块，遇到没闭合的 ``````````` 会把后面的正文全当成代码。这也是为什么"把不完整 Markdown 直接喂给渲染器"这件事在流式场景下天然有问题。
另外一个选型事实：CommonMark 只定义了核心语法，表格、任务列表、删除线、自动链接这些是 GFM 扩展。不同渲染器对方言的支持程度不一样，同一个文件在两个渲染器下可能一个出表格一个出原文。团队内锁死一个渲染器和一个版本，比在文档里写"请以实际效果为准"靠谱得多。
二、流式渲染的三个坑
坑 1：围栏代码块截断。 模型的 delta 常常停在 ```````js```` 这种半行，如果直接渲染，围栏没闭合，后面已收到的正文全部被吞进代码块。常见做法是维护一个最小状态机：如果处于代码块内部，先临时补一个闭合围栏再交给渲染器，等真正的闭合围栏到了再换回来。代价是代码块内容会闪一下，需要接受。
坑 2：表格行被切开。 GFM 表格以行尾换行定界，delta 停在 | 代码块未闭合 | 后续正文全变代码 | 中间时，整个表格块还构不成。硬渲染的话表头会被当成普通段落输出一大段竖线。稳妥策略是表格块等到换行符出现再提交渲染。
坑 3：直接全量重新渲染为什么不行。 热榜上有篇讨论"流式解析能不能让 marked 全量重渲染"。技术上可以，但工程上三个问题：一是每次 delta 都全量 parse，长文档 CPU 浪费明显；二是 innerHTML 整体替换会丢掉选区和滚动位置，页面跳动；三是如果允许内联 HTML，全量替换等于反复执行不可信 HTML。常见方案是增量 diff 合并 DOM（morphdom 一类），或者干脆等流结束再渲染完整文档，中间只显示纯文本。
补充一句编辑器实现形态的观察：现在主流方案是"textarea/CodeMirror 管源码 + 旁边一个只读预览"，而不是真正的所见即所得。原因很实际------所见即所得要在 contenteditable 里维护一套和 Markdown 互转的中间模型， IME 中文输入、光标和 Markdown 语法符号的冲突很难处理干净。Vditor、CodeMirror 6 这一系都选了分屏或双栏切换。选型时如果看到"真所见即所得"的宣传，建议先拿中文输入法和中英文混排试试再下结论。
三、安全：渲染 HTML 必须过一道 sanitizer
Markdown 允许内嵌原始 HTML，而渲染结果就是 innerHTML 级别的注入面。[x](javascript:alert(1))、<img onerror=...> 这类 payload 在不过滤的渲染器里能直接执行。只要 Markdown 来源不完全可信（AI 输出、用户输入都算不可信），渲染后必须过 DOMPurify 这类 sanitizer，并且用默认白名单，不要为了"支持样式"去开 ALLOWED_URI_REGEXP 之类的口子。这一条比选哪个编辑器重要一个数量级。
四、md转PDF：跑版的根源在打印样式
Markdown 渲染成 HTML 只是前半场，导出 PDF 是后半场，跑版问题基本都出在打印样式没被处理：
- 中文字体：页面 CSS 如果只声明西文字体，打印时中文回退到系统默认字体，行高和字重全变。导出前要显式声明中文字体栈。
- 代码块 ：等宽字体 + 长行，PDF 里要么横向滚动（打印介质不支持滚动）要么自动换行换乱缩进。更实际的做法是导出前给代码块设
white-space: pre-wrap并减小字号，或者导出工具本身做换行处理。 - 分页 ：
@page边距、标题page-break-after: avoid、代码块和表格page-break-inside: avoid，不加的话标题孤零零落在页尾、表格从中间斩断都是常态。
如果导出工具已经内置了这些打印样式，就省得自己维护一份 print CSS------这是我后来对"md转PDF"功能的实际要求。
五、在线编辑器验证记录
理完上面这些，我拿一篇真实的笔记（就是这篇的前身）在在线编辑器里过了一遍。
分屏编辑，左边源码右边实时渲染，所见即所得：
GFM 表格渲染正常，表头对齐、单元格不换行错乱：
检查清单、代码块语法高亮、引用块都按预期渲染：
同一篇内容丢进 Markdown 转 PDF 工具，主题、纸张、方向、边距、字号可调，实时预览确认排版后一键导出：
这两步我用的是工具派上的 Markdown 编辑器，选它只是因为分屏预览、GFM 支持和导出 PDF 刚好覆盖上面的检查项。
结论
markdown在线编辑器的选型，功能列表反而不是重点：先确认它用哪个渲染器、CommonMark/GFM 兼容性如何、允不允许内联 HTML（以及有没有 sanitization），再看导出 PDF 时打印样式处理得怎么样。流式场景下，记住三个坑------代码块补围栏、表格等换行、别全量重渲染------能少加很多班。
项目地址：gjupai.com/