这是一个左右(窄屏时上下)对照的 Markdown 编辑器:一边是源码输入框,另一边实时显示渲染后的效果。渲染由 marked 库完成,输出的 HTML 会再经过 DOMPurify 净化后才显示。你可以把写好的内容下载成 .md 文件,或者把渲染后的 HTML 代码复制出来。需要先说明它不是什么:它没有工具栏按钮(不能点按钮加粗、插入表格),不会自动保存内容,不支持导出 PDF 或 Word,也没有语法高亮或图片上传功能。它适合用来练习语法、检查一段 Markdown 的渲染效果,或者临时写个简单的文档。

操作步骤

1. 页面打开后,左边「编辑(Markdown 源码)」框里已经放了一份示例文档,直接修改或全部删掉重写即可。示例文档的语言跟随你当前选择的界面语言。
2. 在左边输入 Markdown 语法,右边「预览」区会随输入实时更新,没有单独的刷新或渲染按钮。
3. 需要保存时,点「下载 .md 文件」。浏览器会把当前源码保存为一个文件,中文界面下默认文件名是「文档.md」,英文界面下是 document.md。
4. 需要把渲染结果交给网页或邮件模板使用时,点「复制渲染后的 HTML」,复制到剪贴板的是净化之后的 HTML 字符串,而不是预览的样式。点击后页面没有任何提示,直接粘贴到别处即可检查是否复制成功。

一个实际例子

假设你要写一份简单的清单。在左边输入一行「## 标题」、一个两列的表格(第一行 | 名称 | 数量 |,第二行 | --- | --- |,第三行 | 苹果 | 3 |)和一行「- [x] 完成」。用工具使用的同一个 marked 库解析,实际得到的 HTML 是:一个 h2 标题,一个带 thead 和 tbody 的 table,以及一个包含已勾选且禁用状态的复选框的列表项。把「~~删除~~」解析会得到 del 标签,**粗** 得到 strong 标签。另外实际运行时,单独换行(两行之间没有空行)不会变成换行,而是被合并到同一段 p 里,若要换行需要在行尾加两个空格或者空一行。预览区会显示这些结果,你可以边改边看。

支持范围与已知限制

• 语法由 marked 解析,支持常见的标题、粗体、斜体、删除线、有序和无序列表、任务列表、引用、行内代码和代码块、链接、图片、表格等 GitHub 风格 Markdown 常用写法。具体以 marked 的行为为准,某些扩展语法(脚注、数学公式、流程图、Emoji 简码)不被支持。
• 渲染后的 HTML 会经过 DOMPurify 净化,用来过滤脚本等危险内容。因此你写进去的 script 标签或事件属性不会出现在预览或复制出来的 HTML 里。如果你确实需要保留这类内容,这个工具不适合。
• 预览样式只为 h1 到 h3 标题、段落、列表、引用、代码、链接和表格设置了简单样式。更深层级的标题(h4 以后)、分割线等使用浏览器默认外观,预览效果与最终放进你网站后的样子不一定一致。
• 不会自动保存。没有使用本地存储,刷新或关闭页面后输入的内容就丢失,需要的话请先点「下载 .md 文件」。
• 「复制渲染后的 HTML」依赖浏览器的剪贴板权限。如果浏览器拒绝,代码会忽略这个错误,页面不会提示失败。
• 图片只能引用网络地址。如果你写了图片链接,预览时你的浏览器会去加载那个地址;没有图片上传、粘贴图片或本地图片功能。
• 文件大小受浏览器和设备内存限制,过长的文档会让输入变卡。
• 导出格式只有 .md 一种,没有 HTML 文件、PDF 或 Word 导出。

常见问题:为什么我的换行在预览里没有生效?

这是 Markdown 的标准行为:一个普通换行在渲染后会被当成空格并入同一个段落。要得到新段落,需要空出一整行;要在同一段里强制换行,在行尾加两个空格再回车。这不是工具故障。

常见问题:表格没有显示成表格怎么办?

表格需要有表头行和由短横线组成的分隔行,每行用竖线隔开。最常见的错误是缺少分隔行(| --- | --- |),或者表格上方没有空一行,与上面的段落连在了一起。修正后预览会立刻更新。

常见问题:复制出来的 HTML 带样式吗?

不带。复制的是纯净的 HTML 标签文本(如 h2、p、table),预览区里的字体、颜色、边框等样式来自本页自己的 CSS,不会包含在复制内容里。放进你的网站或邮件后,外观取决于那里的样式表。

常见问题:能和 GitHub、Typora 等工具互通吗?

.md 文件是纯文本,可以在其他编辑器里打开。不同工具使用的 Markdown 实现存在细微差别,比如换行、嵌套列表缩进、任务列表和扩展语法的处理,所以在这里看到的效果与别处可能不完全一致。

隐私与处理方式

解析、净化和预览都在你的浏览器里完成,代码里没有把你输入的文本发送给服务器,也没有保存到本地存储。点击「下载 .md 文件」只是在本地生成一个文件。唯一可能产生网络请求的情形,是你的 Markdown 里引用了网络图片,此时是你的浏览器去加载那个图片地址。