博客
简体中文

Markdown 在线预览 — 实时渲染与复制 HTML

实时 Markdown 编辑器,可复制或保存净化后的 HTML

在浏览器中处理 · 不上传任何内容

开启后,文本只保存在这个浏览器中,不会发送到服务器。关闭后会删除已保存的文本。

预览

正在加载预览引擎…

预览 HTML 始终经过净化:脚本、事件属性、javascript: 链接、iframe 和表单都会被移除。如果文本中有图片地址,浏览器会直接从该地址加载图片。

功能简介

Markdown 在线预览会在你输入 Markdown 的同时,在旁边显示渲染结果。适合在发布前检查 README、博客草稿、开发文档或会议记录。标题、列表、引用和代码块都能使用,GitHub Flavored Markdown 的扩展语法(表格、删除线和任务列表)也一样。输出在显示前总会经过净化,所以粘贴来源不明的文本也不会运行任何脚本。

使用方法

  1. 在左侧框中输入或粘贴 Markdown。一开始有一段简短的示例,“清空”按钮可以清除它。
  2. 停止输入片刻后,右侧的预览会刷新。请亲眼检查表格对齐和嵌套列表。
  3. 点击“复制 HTML”,把净化后的 HTML 片段复制到剪贴板,可直接用于 HTML 模式的编辑器或邮件模板。
  4. “保存 .md”下载原始文本,“保存 .html”下载带有简单样式表的完整 HTML 文档。文件名取自第一个一级标题。
  5. 想稍后继续编辑,就开启草稿选项,文本只保存在本浏览器中。

工作原理

  • 解析器: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 个字符。超过后预览会暂停并显示提示,很长的文档请分段粘贴。

没找到想要的工具?