Markdown 在线预览

关于 Markdown 在线预览

Markdown 预览器把编辑器和实时渲染预览并排放在一起。每敲一个键都会重新渲染，渲染出的 HTML 会先经过一道净化处理，移除脚本、事件处理器和内嵌框架，之后才进入页面。因此即使粘贴来路不明的 README 或发布说明，你看到的也只会是文本。

世上并没有唯一的 Markdown。CommonMark 修补了原始语法的歧义，GitHub Flavored Markdown 又加了表格、任务列表、删除线和裸 URL 自动链接，各发布平台还会叠加自家扩展。这个预览渲染 GitHub Flavored Markdown 并开启软换行，行为更接近 GitHub 的评论框，而不是 README 的渲染结果。分清自己看的是哪种方言，决定了预览是「能预测线上效果」还是「在悄悄骗你」。

如何使用这个开发者工具

在左侧面板写入或粘贴 Markdown。右侧预览随输入更新，没有需要点击的按钮。
优先检查各方言之间有差异的结构：表格、任务列表、删除线，以及你指望会自动变成链接的裸 URL。
留意段落内单个换行的处理结果。这个预览会把它变成换行标签，所以按 80 列硬折过的正文会渲染成一堆短行。
如果粘贴了原始 HTML，请对照预览确认。被净化器移除的元素和属性会直接消失，不会有任何报错。
确认无误后，从编辑器里复制 Markdown 源码。预览是渲染结果而不是导出物，这里没有 HTML 输出面板。

实例：那个让人意外的软换行

下面段落里的两句话写成了两行源码，中间没有空行。CommonMark 会把它们合成一个段落并用空格连接；这个预览因为开启了软换行，会在中间插入一个换行标签。

Markdown 源码

## Release 2.4

Fixes the retry loop and adds a `--dry-run` flag.
Ship on 2026-04-02.

- [x] migration reviewed
- [ ] changelog written

See the ~~old~~ guide at https://example.com/guide.

预览背后的 HTML

<h2>Release 2.4</h2>
<p>Fixes the retry loop and adds a <code>--dry-run</code> flag.<br>Ship on 2026-04-02.</p>
<ul>
<li><input checked="" disabled="" type="checkbox"> migration reviewed</li>
<li><input disabled="" type="checkbox"> changelog written</li>
</ul>
<p>See the <del>old</del> guide at <a href="https://example.com/guide">https://example.com/guide</a>.</p>

工具界面显示的是渲染结果而不是这段标记，这里把它列出来只是为了让行为可核对。请注意两句话之间的 br、任务列表语法生成的禁用状态复选框，以及自己变成了链接的裸 URL。三者之中，第一个正是与 GitHub 上 README 渲染结果不同的地方。

人们真正会用到的那些特性上的方言差异

只有最后一列描述本预览。前两列列在这里，是为了让你能预判同一份文档发到别处会变成什么样。

特性	CommonMark	GitHub Flavored Markdown	本预览
竖线表格	不支持	支持	支持
任务列表，短横线加方括号	渲染成字面方括号	渲染成禁用状态复选框	渲染成禁用状态复选框
双波浪线删除线	不支持	支持	支持
裸 URL 自动成链	不会，必须加尖括号	会，裸邮箱地址也会	会，两者都会
段落内的单个换行	视为一个空格	文件中是空格，评论框中是换行	一律是换行
标题锚点 id	不生成	生成，因此 #章节链接可用	不生成
脱字符标记的脚注	不支持	支持	不支持，标记会变成一个链接
原始 HTML 块	原样透传	透传后按 GitHub 的白名单过滤	透传后由本地净化器过滤

常见问题排查

文档里的原始 HTML 在预览中消失了一部分。

成因净化处理发生在 Markdown 转换之后。它会整体移除 script、iframe、object、embed、link、meta、base 元素，并从存活下来的节点上剥掉 on 系事件属性、javascript: 链接和 srcdoc 属性。

解决办法 如果你只是想看文本，这里没有需要修的东西。可以预期 details 元素、带 style 属性的 span、以及 https 来源的图片会保留；内嵌视频的 iframe 和 onclick 处理器不会。

一个段落里每一行都断开了。

成因软换行是开启的，段落内的每个换行都会变成 br。因此按固定列宽硬折过的正文，会渲染成一列短行。

解决办法 把每个段落写成一整行，交给编辑器做软折行。这种写法在所有方言里渲染结果一致，也因此是准备对外发布内容时更稳妥的写法。

脚注渲染成了指向不存在目标的链接。

成因脚注语法是 GitHub 的扩展，这个渲染器没有实现。脱字符标记被当作普通的引用式链接解析，而定义那一行被当成了该链接的目标。

解决办法 在这里预览的文档，请改用行内括号或手工编号的注释小节。脚注务必在目标渲染器上验证，因为即使在都支持脚注的平台之间，编号和回跳标记也各不相同。

YAML front matter 变成了一个标题加一条分隔线。

成因 front matter 是静态站点生成器的约定，不是 Markdown 的语法。开头的三个短横线被当成分隔线，第一行键名加上结尾的三个短横线则被读成了下划线式标题。

解决办法 预览前先删掉 front matter 块，或者接受顶部这两个多余元素。真正构建站点的生成器会正确消费这个块。

适合用这个工具的场景

提交前检查 README、更新日志或发布说明里有没有列表嵌套错乱和表格写坏。
阅读别人发来的 Markdown 文件，同时不必信任其中可能夹带的 HTML。
确认表格的列数和分隔行匹配——这是表格被渲染成普通段落最常见的原因。
起草评论或工单正文，此时软换行的行为与目标平台一致，多数平台的评论框都是这么处理的。

应该换用别的工具的场景

拿到 HTML。预览只负责渲染文档，不提供 HTML 输出；需要标记本身时，请用站点生成器或构建期的 Markdown 流水线。
预判某个具体平台会怎样发布这份文档。各方言在标题锚点、脚注、原始 HTML 和嵌入内容上都有差异，最终请在它真正上线的地方渲染一遍。
预览独立的 HTML 页面。输入是 HTML 而不是 Markdown 时，请用 HTML 预览器，它会在沙箱框架中渲染标记。

隐私与数据处理

Markdown 内容不会离开当前浏览器标签页。解析在本地完成，结果插入页面前先被净化：移除 script、iframe、object、embed、link、meta、base 元素，以及所有 on 开头的属性、javascript: 链接和 srcdoc 属性。这保护的是你正在看的页面，并不代表你最终发布到的系统会如何对待同一份文档。

常见问题

预览用的是哪种 Markdown 方言？

GitHub Flavored Markdown，并开启了软换行。因此你能用表格、任务列表、删除线，以及裸 URL 和裸邮箱地址的自动成链。但没有脚注、没有标题锚点 id，也不处理 front matter。

Markdown 能在这个预览里执行 JavaScript 吗？

渲染出的 HTML 在插入页面前会被过滤：script 元素、框架、嵌入对象、on 系事件属性和 javascript: 链接都会被移除。对一个预览来说这是相当强的屏障，但仍请把不可信的 Markdown 在任何地方都当作不可信内容，因为它下一站遇到的渲染器可能规则不同。

我的表格为什么渲染成了段落？

几乎总是因为缺了分隔行，或者分隔行的单元格数量和表头不一致。第二行里每一列都需要自己的那段短横线，竖线要在数量上对齐，而不是在视觉上对齐。

预览会保存我的文档吗？

不会。内容不跨访问保存也不上传，关闭或刷新标签页就会丢失。请把源码留在你的编辑器或仓库里，这个面板用来检查，而不是用来创作任何丢不起的内容。

为什么我的标题没有生成锚点链接？

标题锚点 id 是发布平台加的，不是 Markdown 规范的一部分。GitHub 会根据标题文字生成，这个预览不会。所以指向 #某章节的链接在 GitHub 上能用，在这里点了没有反应。

预览的样式和我的站点一样吗？

不一样。预览套用的是本站自己的排版，目的是让结构看得清楚。间距、代码块配色和表格边框都会和你的目标环境不同。结构在这里判断，外观请在真实主题里看。

Markdown 预览