Markdown 预览器
在左侧编辑 Markdown 源码，右侧实时预览渲染结果。支持标题、粗体斜体、行内代码、代码块、列表、链接、引用、分隔线和表格等常用语法。
0 字
Markdown 是什么？
Markdown 不是某个软件，而是一套用纯文本符号表达排版的"规则"。同一份 .md 源文件，在遵循 CommonMark 0.31.2（基础规范，2024-01-28 发布）或 GitHub Flavored Markdown / GFM 0.29-gfm（2019-04-06，CommonMark 的严格超集）的渲染器里会得到一致结果；一旦混入了平台私有后处理（表情短码、@提及、标签过滤等），同样的源码就可能渲染出不同的样子。本预览器在浏览器本地按"先转义、后渲染"的子集规则工作，因此你写下的符号与最终结构之间是可预测的——这正是它适合在发布前确认效果的原因。国内主流写作平台（Gitee、掘金、CSDN、少数派）普遍以 GFM 为准，所以下面差异对照也以 GFM 为国内口径。
CommonMark 0.31.2 与 GFM 规范差异对照
下面这张表把"到底哪些语法是本工具一定支持、哪些属于扩展"一次性讲清，避免你在平台间搬运文档时踩坑。规格来源：CommonMark 0.31.2（spec.commonmark.org）与 GFM 0.29-gfm（github.github.com/gfm）。
| 特性 | CommonMark 0.31.2 | GFM 0.29-gfm | 本预览器 |
|---|---|---|---|
| 管道表格 | 不支持 | 支持 | 支持 |
任务列表 - [ ] | 不支持 | 支持 | 不支持 |
删除线 ~~文字~~ | 不支持 | 支持 | 不支持 |
| 裸 URL 自动链接 | 仅 <url> 尖括号形式 | 裸 URL 自动链接 | 不支持裸 URL（用 [文本](url)） |
脚注 [^1] | 规范未定义 | 规范未定义（GitHub 用非规范扩展） | 不支持 |
| 强调 intraword 下划线 | 不允许 | 同 CommonMark | 简化规则（见解析陷阱表） |
语法元素速查表（含嵌套规则）
| 元素 | 写法 | 渲染为 | 嵌套 / 边界规则 |
|---|---|---|---|
| 标题 | # 到 ###### 后接空格 | <h1>~<h6> | 1–6 级；# 后必须有空格，可加闭合 # |
| 强调 | **粗**/__粗__ 加粗，*斜*/_斜_ 斜体 | <strong>/<em> | 成对闭合；代码跨度内不生效 |
| 行内代码 | `code` | <code> | 反引号内原样保留，不解析强调 |
| 代码块 | ``` + 可选语言 | <pre><code> | 围栏成对，内容不解析 Markdown |
| 引用 | > 文本 | <blockquote> | 连续 > 行合并；空行结束 |
| 列表 | -/*/+ 或 1. | <ul>/<ol> | 续行缩进到内容列；有序项从 1 开始 |
| 链接 | [文本](url) | <a> | URL 限 http/https/mailto/tel/#/站内绝对路径 |
| 图片 |  | 本预览器不支持 | 当前子集不渲染图片语法 |
| 分隔线 | ---/***/___ | <hr> | 3 个以上同符号 |
| 表格 | | 列 + |---| 分隔行 | <table> | 需分隔行，否则退化为文本 |
如何使用本工具
- 在编辑区输入或粘贴 Markdown 内容
- 右侧（下方）实时显示渲染结果，输入停顿 150ms 后刷新
- 点击「填入示例」快速体验全部语法，点击「清空」重新开始
- 编辑区下方显示当前字数（中文字符与英文单词合计）
Markdown 解析陷阱对照
注意： 下面这些"写了却和预期不一样"的情况，大多来自对 CommonMark 规则的误解，而非工具故障。先在本地预览确认，再发布到平台最稳妥。
| 陷阱 | 常见误写 | 正确写法 | 本预览器行为 |
|---|---|---|---|
| 硬换行 | 行尾两空格期望 <br> | 用空行分段 | 同段内换行合并为空格，不生成 <br> |
| 强调边界 | a_b_c 期望强调 | 用 * 或空格分隔 | 简化正则下 _ 可能误强调；代码跨度内永远安全 |
| HTML 与 MD 混排 | 在 <div> 内写 MD | 用空行退出 HTML 块 | 一律先转义，原始 HTML 不渲染 |
| 列表续行缩进 | 续行顶格 | 缩进到内容列 | 缩进不足视为新段落 |
| 表格分隔行缺失 | 只写一行 |a|b| | 第二行加 |---| | 无分隔行则退化为普通文本 |
渲染安全对照：XSS 场景
注意： 任何允许"原始 HTML 放行"的渲染环境（例如未净化的 CommonMark 配置）在渲染用户提交内容时都可能引入 XSS；本预览器通过"先转义、后渲染 + 链接协议白名单"从根本上规避。下面对照三种输入在两类环境中的结果：
| 场景 | 放行原始 HTML 的风险 | 本预览器（先转义后渲染） | 结果 |
|---|---|---|---|
<script>alert(1)</script> | 脚本执行 | 转义为文本 | 安全 |
<img src=x onerror=alert(1)> | 事件执行 | 转义为文本 | 安全 |
[x](javascript:alert(1)) | 协议执行 | sanitizeUrl 拒绝 | 渲染为纯文本 |
<style> 标签 | 布局破坏 | 转义 | 安全 |
data: URI 链接 | 可能执行 | 拒绝 | 纯文本 |
需要把渲染出的 HTML 再剥离标签拿到纯文本，可配合 HTML 去标签工具 使用。
与纯文本 / HTML 的体积对照
同一份内容（标题、加粗、列表、表格、代码块）用四种方式表示，UTF-8 字节数如下。Markdown 的"符号即语义"让它最紧凑；手写 HTML 与渲染后 HTML 因标签而膨胀约一倍；纯文本最轻但丢失全部结构。
| 形式 | 字节数（UTF-8） | 相对 Markdown | 说明 |
|---|---|---|---|
| Markdown 源码 | 188 | 1.00× | 最紧凑，符号即语义 |
| 手工 HTML | 359 | 1.91× | 同一内容手写标签 |
| 本预览器渲染 HTML | 374 | 1.99× | 含语义标签，体积略增 |
| 纯文本（去标记） | 136 | 0.72× | 仅内容，丢失结构 |
要逐字符核对 Markdown 源与渲染结果的差异，可参考 文本对比指南。
三个真实算例（用默认示例）
下面三个算例直接采用本工具「填入示例」按钮给出的默认输入，数字由页面同一套逻辑算出，和你在编辑器里看到的结果自洽。
算例一：默认示例的字数统计
点击「填入示例」得到的整段 Markdown 共 491 字节（UTF-8），工具底部计数器显示 106 字（94 个中文字符 + 12 个英文单词）。该数字由 countWords 按"中文字符数 + 英文单词数"算出，与编辑器实时显示完全一致。若想单独统计长文的字数，可用 字数统计器；关于字数与阅读时长的更多讨论见 字数统计指南。
算例二：强调与代码跨度
默认示例第二行 支持 **粗体**、*斜体* 和 `行内代码`。 渲染为：
支持 <strong>粗体</strong>、<em>斜体</em> 和 <code>行内代码</code>。
这说明 **粗体** 与 *斜体* 被识别，而行内代码跨度保护了内部的反引号内容。再验证代码跨度对强调符号的保护：输入 模板 `a**b**c` 中的星号 会渲染为 模板 <code>a**b**c</code> 中的星号——星号不被当成语法，因为代码跨度内永远原样保留。
算例三：链接安全放行对比
默认示例末行 [工具箱里](https://www.calc-tools.top/) 经 sanitizeUrl 放行，渲染为 <a href="https://www.calc-tools.top/">工具箱里</a>（https 协议在白名单内）。若把同处写成 [恶意](javascript:alert(1))，sanitizeUrl 返回空，链接被过滤为纯文本；mailto:a@b.com 放行，data: 协议拦截。可见本地渲染对 XSS 免疫。
为什么要用 Markdown 写东西？
Markdown 最大的好处，是让你在"不打断思路"的情况下完成排版。相比用 Word 反复点菜单调格式，你只需要敲几个简单的符号（比如 # 代表标题、** 代表加粗），就能得到结构清晰、格式统一的文档。写完的源文件是纯文本，任何编辑器都能打开，也不会因为软件版本不同而出现排版错乱——这正是它被 GitHub、博客、技术文档广泛采用的原因。
对写作者来说，Markdown 让你把注意力集中在"内容"而非"格式"上；对开发者来说，它能轻松转成 HTML、PDF、网页等格式，方便发布与分享。学会常见的几个语法，几乎可以覆盖日常写作和文档排版的 90% 需求，性价比非常高。
结果怎么用？
通过实时预览，你能立刻看到写好的 Markdown 渲染出来的样子：标题的层级、加粗斜体、列表缩进、代码高亮、表格对齐是否正确，一目了然。它非常适合写 README、博客草稿、技术文档、笔记，以及需要"所见即所得"效果的写作场景。改到满意后，把源 Markdown 复制到你的平台或工具即可发布，预览只是帮你确认最终效果。
补充问答
两个空格结尾真的会换行吗？本预览器怎么处理硬换行？不会。CommonMark 里行尾两个空格是"硬换行"（生成 <br>），但本预览器把同一段落内的换行统一合并为空格，不生成 <br>。需要换行请直接用空行开始新段落。
为什么我写的表格没渲染成表格，只显示成一行竖线文字？管道表格必须包含"分隔行"。正确写法是首行表头后用 | --- | --- | 这样的分隔行；若只有一行 |a|b| 没有分隔行，渲染器会把它当作普通段落。列分隔的 | 首尾可省，但分隔行不能省。
在 Markdown 里直接粘贴 <script> 或 <img src=x onerror=...> 会被执行吗？不会。本预览器在渲染前先对所有文本做 HTML 转义，再解析 Markdown，因此 <script>、onerror 等都被当作普通文字显示，不会执行任何代码；链接里的 javascript:、data: 协议也会被过滤。
GFM 的任务列表 - [ ] 和删除线 ~~文字~~ 在本预览器能用吗？当前子集不支持。任务列表、删除线属于 GFM 扩展而非 CommonMark 基础规范；本预览器对齐 CommonMark 基础语法 + 常用子集（标题/强调/代码/列表/引用/链接/表格/分隔线）。若你的目标平台用 GFM，请在该平台预览确认这些扩展的渲染。