Markdown 在线编辑器
什么是 Markdown？
Markdown 是一种轻量标记语言，用接近纯文本的语法编写结构化内容。标题、列表、链接、图片、引用、代码块和表格都可以用简单符号表示，再渲染成 HTML 或其他格式。Markdown 编辑器能让源码和预览对照检查，快速发现格式错误，并更高效地准备 README、技术文档、博客文章、笔记、知识库、更新日志和产品文案。Markdown 故意保持简单，但不同平台支持的扩展并不完全一致，例如 GitHub-Flavored Markdown、Frontmatter、任务列表或 Mermaid 图表。因此正式发布前仍应在目标系统中确认最终渲染效果。
使用方法
使用方法
- 在左侧编辑器中输入 Markdown 文本
- 右侧面板实时预览效果
- 使用工具栏按钮插入常用语法
- 底部栏显示字数、字符数和行数
- 内容自动保存到浏览器本地存储
功能
编辑提示
- 不同平台的预览渲染可能存在差异，使用表格、HTML 或扩展 Markdown 功能时，请到目标系统中检查最终输出效果。
- 自动保存功能方便起草内容，但在清除浏览器数据或更换设备前，请为重要笔记保留独立备份。
使用场景
技术原理
Markdown 渲染通常分三步：分词器（Tokenizer）将文本切成标题、段落、列表、代码块等语法单元；解析器（Parser）按语法规则将 token 流构建为抽象语法树（AST）；渲染器（Renderer）遍历 AST 输出对应的 HTML。常见的 JavaScript 库包括 marked、markdown-it、remark 和 micromark——它们在体积、速度和可扩展性上各有差异，但都遵循 CommonMark 规范。 CommonMark 修复了原始 Markdown 语法的歧义（如嵌套列表如何缩进、行内代码如何界定边界），使不同实现产生相同的渲染结果。在 CommonMark 基础上，GitHub 增加了 GFM（GitHub Flavored Markdown），新增表格、任务列表（- [ ]）、删除线（~~）、自动链接和围栏代码块；GFM 如今是事实标准，大多数现代 Markdown 工具默认启用。 代码块语法高亮通常由 highlight.js 或 Prism.js 完成，它们在渲染时识别代码块的语言标签，用 CSS class 标记关键字、字符串和注释，再由主题配色。为防止用户输入的 HTML 触发 XSS，渲染器通常将输出通过 DOMPurify 或类似的白名单过滤器，剥离 script、iframe 和 on* 事件属性——这样粘贴他人的 Markdown 不会执行恶意脚本。
- 解析流程：原始文本经过 Tokenizer → Parser → Renderer 变成 HTML，AST 是中间表示。
- 标准：CommonMark 是官方语法；GFM 在此基础上扩展了表格、任务列表、删除线、围栏代码块和自动链接。
- 库对比：marked 体积小速度快，markdown-it 插件生态丰富，remark 基于 unified 生态适合文档处理流水线。
- 语法高亮：highlight.js 或 Prism.js 在解析时读取代码块的语言标签，用 CSS class 标记关键字、字符串和注释。
- XSS 防护：DOMPurify 等库对输出 HTML 做白名单过滤，移除 script、iframe 和 on* 事件属性，防止脚本注入。
- 实时预览：编辑器监听 input 事件，防抖后重新解析，通过 diff 更新右侧 DOM，兼顾响应速度和性能。
示例
标题、列表和代码块
# 一级标题
## 二级标题
- 列表项 A
- 列表项 B
- 嵌套列表项
```javascript
function hello() {
console.log('Hello Markdown');
}
```表格
| 工具 | 类型 | 体积 |
|---------|--------|------|
| Vite | 构建 | 小 |
| Webpack | 构建 | 大 |
| Rollup | 打包 | 中 |引用与链接
> “Markdown 让写作回归内容本身。”
> -- John Gruber
参考：[CommonMark Spec](https://commonmark.org)常见问题
支持哪种 Markdown 方言？
大多数版本支持 CommonMark 加 GitHub Flavored Markdown 扩展：表格、删除线、任务列表、带语言标识的围栏代码块。部分版本还集成 MathJax/KaTeX 渲染 $math$ 公式以及 Mermaid 绘制图表。具体功能可在工具栏查看。
文档会被上传吗？
不会。Markdown 解析和渲染都在浏览器中完成，通常使用 markdown-it 或 remark 等 JS 库。你的草稿不会离开本地设备。
实时预览是怎么工作的？
你输入的内容会被实时解析，并在预览面板中渲染为 HTML。同步滚动通过匹配段落位置使两栏保持对齐。大多数版本还支持全屏和左右分栏切换。
可以导出文档吗？
可以，支持下载为 .md（原始源码）、HTML（已渲染，可嵌入网页）或 PDF（通过浏览器打印引擎生成）。PDF 输出会保留标题、列表、代码块和内嵌图片。如果需要像素级精确的 PDF，建议把 HTML 粘贴到专业排版软件中处理。
关闭标签页后会保存草稿吗？
大多数版本会自动保存到 localStorage，重新打开同一浏览器即可恢复草稿。关闭隐私窗口或清除站点数据则会清空。如需真正持久化保存，请定期将 .md 文件导出到文件系统或 git 仓库。
如果我粘贴图片，图片会被上传吗？
部分编辑器会以内联 base64 形式存储粘贴的图片（在 Markdown 源码中可见）；另一些则会上传到图床——具体行为请看页面说明。如果在意隐私，建议先把图片保存到本地，再用相对路径引用。
可以插入表格、公式或图表吗？
GitHub Flavored Markdown 表格（| col1 | col2 |）在所有编辑器中都能用。公式块（$x^2$）和 Mermaid 图表（```mermaid）需要编辑器明确支持，请在工具栏查看是否有相应按钮。支持的环境下，预览会实时渲染。