HandyTools Hub

Markdown 编辑器

使用语法高亮实时编写和预览 Markdown。

0 个字符 | 0 个单词

使用方法

在屏幕左半部分的文本域中输入或粘贴 Markdown，右侧经过清理的 HTML 预览会在你停止输入 150 毫秒后更新，既能跟上正常打字速度，又不会每敲一个字符就重渲染。面板上方的工具栏可插入最常用的语法：粗体、斜体、H1、H2、链接、图片和围栏代码块。如果当前有选中文本，按钮会把它包起来；如果没有，光标会停在标记中间。Ctrl/Cmd+B、Ctrl/Cmd+I 和 Ctrl/Cmd+K 分别对应粗体、斜体和链接。

状态栏实时显示两个数字：字符数（原始字符串长度）和字数（按空白切分）。在移动端宽度下两个面板合并为一个，用 Editor / Preview 按钮切换。

marked 和 DOMPurify 实际做了什么

预览背后有两个库。marked 把 Markdown 转成 HTML，使用 CommonMark 加 GitHub Flavored Markdown 扩展（gfm: true）以及换行扩展（breaks: true）。随后 DOMPurify 在 HTML 进入 DOM 之前进行清理。它会禁止 form、input、button、select、textarea 元素，以及 onerror、onclick、onload、onmouseover 属性；其他不在 DOMPurify 默认白名单内的一律丢弃。这就是为什么内嵌 <script> 的 Markdown 会像从未写过脚本一样渲染：该元素连同内容被移除，而不是转义后显示出来。

整个流程是单向的。预览不可编辑，在预览里修改也不会影响 Markdown 源码，所以请始终编辑左侧面板。

实操示例

示例 1：标题、强调和表格。

输入：

# Release Notes

**Version 2.1** fixes the *login* bug.

| Field | Value |
| ----- | ----- |
| Build | 9182 |

预览会生成一个内容为 Release Notes 的 <h1>，一个包含 <strong>Version 2.1</strong> 和 <em>login</em> 的段落，以及一个带表头和一行数据的真实 <table>。点击 Copy HTML 得到的就是这段标记，与预览完全一致。

示例 2：换行与段落。

输入：

First line
Second line

New paragraph

因为开启了 breaks，前两行会在同一个 <p> 内变成 First line<br>Second line。空行会开启新段落。如果你想要严格 CommonMark 那样的软换行，本编辑器不会提供。

示例 3：为什么粘贴的 HTML 表现不一致。

输入：

<textarea>keep me</textarea>
<img src="x" onerror="alert(1)">

<textarea> 是被禁止的标签，因此标签被丢弃，但其中的文本 keep me 得到保留。图片作为 <img> 存活下来，但 onerror 属性被清除，所以 alert(1) 不会执行。原始 HTML 因此只被部分接受：安全标签通过，危险标签被拦截。

常见错误

  • 以为单个换行是软换行。 开启 GFM 换行后，按一次回车就会产生可见断行；要另起一段请空一行。
  • 指望粘贴自 WordPress 或 Google Docs 的 HTML。 <form>、<button>、<input> 等结构标签会被移除，用这些控件搭出的版式会塌成纯文本。
  • 对非拉丁文字依赖字数统计。 一段 400 字的中文会被报成 1 个词，应改用字符数。
  • 打完字立刻关闭标签页。 自动保存每 5 秒触发一次，突然关闭前最后几秒输入的内容可能来不及写入。
  • 以为导出的 HTML 带高亮。 预览用 highlight.js 高亮围栏代码，但这一步不属于下载文件。

导出方式选择

操作产物典型用途
导出 HTML内联 CSS、带标题的完整 HTML 文档发布或邮件发送独立页面
导出 Markdown未改动的源码文本提交到仓库或导入其他编辑器
复制 HTML剪贴板中的已清理片段粘贴进 CMS 正文字段

导出 HTML 会把渲染片段包进一个固定阅读宽度的文档，带有类似 GitHub 的标题样式和表格边框，开箱即用。复制 HTML 只给出片段，适合目标位置已有自己的样式时使用。

准确性与局限

预览反映的是浏览器在清理之后真正渲染的结果，因此用来检查标题、链接和表格是可靠的。有两点局限值得了解。第一，字数和字符数读取的是 Markdown 源码而非渲染后的正文，链接 URL 和语法标记也会计入总数。第二，图片通过 URL 引用，编辑器从不上传或内联图片，所以带有相对图片路径的导出文件在图片未随之迁移时会显示为破图。该工具完全在浏览器中运行，但这也意味着一旦清除浏览器数据，就没有服务器端副本可供恢复。

相关工具

常见问题

为什么预览里单个换行也变成了断行？

预览使用 marked 的 GFM 换行扩展渲染（breaks: true），因此段落内的一个换行会生成 <br>。如果想要两个独立段落，请空出一整行。

为什么粘贴的 <form>、<button> 等 HTML 在预览里消失了？

每次渲染都会经过 DOMPurify 过滤。form、input、button、select、textarea 等表单元素以及事件处理属性会被移除，但它们的纯文本内容会保留，所以只剩安全标记。

字数统计如何处理中文或日文？

字数按空白字符切分，所以一整段中文会被算作 1 个词。处理 CJK 文本时应参考字符数，它是原始字符串中每个字符的计数。

localStorage 里保存了什么？草稿会丢吗？

只保存原始 Markdown，键名为 onlinehandytools-markdown-editor，每 5 秒写入一次。隐私模式、清除站点数据或换设备都不会有草稿；由于是定时保存，突然关闭时最多可能丢失约 5 秒的输入。

导出的 HTML 文件是自包含的吗？会保留代码高亮吗？

是自包含的：下载的是完整 HTML 文档，CSS 已内联，可离线打开。预览中的代码高亮由页面里的 highlight.js 完成，不会写入导出文件，因此导出的代码块没有高亮。

编辑器支持 GitHub 任务列表和表格吗？

支持。marked 以 gfm: true 运行，所以管道表格、- [ ] 与 - [x] 任务列表项、删除线和围栏代码块都能在预览中正常渲染。

由 HandyTools Hub 团队审校 · 最后更新