Markdown 在线预览 — 实时渲染与复制 HTML
实时 Markdown 编辑器,可复制或保存净化后的 HTML
在浏览器中处理 · 不上传任何内容
开启后,文本只保存在这个浏览器中,不会发送到服务器。关闭后会删除已保存的文本。
预览
正在加载预览引擎…
预览 HTML 始终经过净化:脚本、事件属性、javascript: 链接、iframe 和表单都会被移除。如果文本中有图片地址,浏览器会直接从该地址加载图片。
功能简介
Markdown 在线预览会在你输入 Markdown 的同时,在旁边显示渲染结果。适合在发布前检查 README、博客草稿、开发文档或会议记录。标题、列表、引用和代码块都能使用,GitHub Flavored Markdown 的扩展语法(表格、删除线和任务列表)也一样。输出在显示前总会经过净化,所以粘贴来源不明的文本也不会运行任何脚本。
使用方法
- 在左侧框中输入或粘贴 Markdown。一开始有一段简短的示例,“清空”按钮可以清除它。
- 停止输入片刻后,右侧的预览会刷新。请亲眼检查表格对齐和嵌套列表。
- 点击“复制 HTML”,把净化后的 HTML 片段复制到剪贴板,可直接用于 HTML 模式的编辑器或邮件模板。
- “保存 .md”下载原始文本,“保存 .html”下载带有简单样式表的完整 HTML 文档。文件名取自第一个一级标题。
- 想稍后继续编辑,就开启草稿选项,文本只保存在本浏览器中。
工作原理
- 解析器:marked(MIT 许可证)按 GFM 规范把文本转换为 HTML。与标准一致,单个换行不会变成换行,除非该行以两个空格结尾或后面跟着空行。
- 净化:DOMPurify(Apache-2.0 或 MPL-2.0,此处按 Apache-2.0 使用)在显示前清理 HTML。script、iframe、object、form 和 style 标签,以 on 开头的事件属性,style 属性,以及使用 javascript: 或 data: 地址的链接都会被移除。
- 链接:保留下来的链接会在新标签页中打开,并带有 rel=“noopener noreferrer”。
- 复选框:任务列表的复选框始终处于禁用状态,预览是只读的。
- 图片:图片地址保持原样,所以浏览器会直接向图片所在的服务器请求,这些服务器能看到该请求。
- 文件:.md 是你的原始文本(UTF-8)。.html 是带有 lang 属性和极简样式表的 UTF-8 文档。
示例
| 你输入 | 你得到 |
|---|---|
**粗体** |
粗体 |
~~删除~~ |
|
- [x] 完成 |
一个已勾选的复选框,后面是“完成” |
[链接](https://example.com) |
在新标签页中打开的链接 |
[点击](javascript:alert(1)) |
地址被移除,只保留文字 |
<script>alert(1)</script> |
什么都不会运行 |
表格写法如下,第二行中的冒号决定对齐方式。
| 商品 | 数量 |
|:---|---:|
| 苹果 | 3 |
常见问题
我的 Markdown 会发送到服务器吗?
不会。渲染和净化都在浏览器中完成,输入的内容不会上传。只有开启草稿选项时,文本才会保存在本浏览器中,关闭后即删除。需要注意的是,如果文本中引用了外部图片,浏览器会直接从该地址加载图片。
文本中的 script 标签会运行吗?
不会。渲染出的 HTML 在显示前总会经过 DOMPurify,它会移除 script 标签、onclick 和 onerror 等事件属性、javascript 链接、iframe、表单和 style 标签。复制或下载的 HTML 也是净化后的版本。
表格和任务列表怎么写?
表格用竖线分隔各列,并在表头下面加一行短横线。这一行左端加冒号表示左对齐,右端加冒号表示右对齐。任务列表以 - [ ] 或 - [x] 开始一个列表项,预览中显示为只读的复选框。两者都是 GitHub Flavored Markdown 的功能。
显示效果会和 GitHub 或我的博客完全一样吗?
语法的解析方式相同,但字体、间距和颜色由各个服务决定。可以用本页确认 Markdown 是否按你的预期解析。下载的 .html 文件只包含一个简单易读的样式表。
输入最多可以多长?
最多 500,000 个字符。超过后预览会暂停并显示提示,很长的文档请分段粘贴。