Markdown 预览

使用方法

1. 在左侧编辑面板中输入或粘贴 Markdown。
2. 右侧会实时显示渲染后的 HTML 预览。
3. 点击 Copy HTML 可将渲染后的 HTML 复制到剪贴板。
4. 点击 Clear 可清空内容重新开始。

支持的语法

• 标题：# H1 至 ###### H6
• 粗体：文本 或 文本
• 斜体：文本 或 文本
• 删除线：文本
• 行内代码：code
• 代码块：三个反引号围栏，可指定语言
• 链接：[文本](url)
• 图片：![替代文本](图片地址)
• 无序列表：- 项目
• 有序列表：1. 项目
• 引用块：> 引文
• 表格（GFM）
• 任务列表：- [x] 已完成 / - [ ] 待办
• 水平线：---

渲染器

预览使用 micromark 4 与 micromark-extension-gfm 3。micromark 声明完全符合 CommonMark 并通过规范的测试集；GFM 扩展加上 GFM 规范 里 GitHub 使用的 5 项功能：表格、任务列表、删除线、自动链接字面量、脚注。预览里的链接在新标签页打开，点击不会离开本页、丢掉正在写的内容。

示例

下面的输入：

# Release notes

See https://example.com and `a **b** c`.

- Parent
  - Child
- [X] Done
- [x] done

3. third
4. fourth

| Item | Price |
|:-----|------:|
| Widget | $9.99 |
| a \| b | 1 |

<b>raw</b> and <img src=x alt=y>

得到的 HTML（即「复制 HTML」的内容）：

<h1>Release notes</h1>
<p>See <a href="https://example.com">https://example.com</a> and <code>a **b** c</code>.</p>
<ul>
<li>Parent
<ul>
<li>Child</li>
</ul>
</li>
<li><input type="checkbox" disabled="" checked="" /> Done</li>
<li><input type="checkbox" disabled="" checked="" /> done</li>
</ul>
<ol start="3">
<li>third</li>
<li>fourth</li>
</ol>
<table>
<thead>
<tr>
<th align="left">Item</th>
<th align="right">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Widget</td>
<td align="right">$9.99</td>
</tr>
<tr>
<td align="left">a | b</td>
<td align="right">1</td>
</tr>
</tbody>
</table>
<p>&lt;b&gt;raw&lt;/b&gt; and &lt;img src=x alt=y&gt;</p>

逐行看：裸网址成为链接（GFM 自动链接字面量）；反引号里的星号原样保留，代码不解析强调；缩进的 - Child 是嵌套列表；[X] 与 [x] 都是已勾选的任务；从 3. 开始的列表把起始号写进 start 属性；分隔行的冒号设定左右对齐，\| 在单元格里表示竖线、不拆格；最后一行原始 HTML 输出为文字。

原始 HTML 显示为文字

CommonMark 允许在 Markdown 里写 HTML 标签，GitHub 渲染其中经过过滤的一部分：它的渲染管线会去掉 script 标签、内联样式和 class / id 属性。本预览选更严格的做法，把所有原始 HTML 转义成文字，这也是 micromark 的默认行为。原因在于预览运行的位置：zerotool.dev 上其他工具会把输入保存在浏览器存储里，同源的页面都能读到。如果渲染原始 HTML，粘贴文本里的 <img src=x onerror=…> 就会在本站执行脚本。转义之后，文本里的任何标记都不会成为页面元素，复制出的 HTML 粘贴到别处也安全。

链接地址同理：链接只保留相对地址和 http、https、mailto、irc、ircs、xmpp，图片只保留相对地址和 http、https；javascript:、data: 等其他协议的 href / src 置空，链接文字保留。需要 <details>、<kbd>、<br> 生效的文档，请在 GitHub 自己的预览里检查。

图片会联网加载

![alt](https://…) 生成的 <img> 会由浏览器从该地址下载，图片服务器能看到你的 IP 和浏览器信息。文字和文档其余部分留在浏览器里。

限制

• 原始 HTML 不渲染（见上文），依赖 HTML 标签的文档在这里与 GitHub 显示不同。
• 标题没有 id 锚点；GitHub 渲染页面时会加。
• :tada: 这类 emoji 简码、@提及、#123 这类 issue 引用是 GitHub 在 GFM 规范之外的功能，显示为文字。
• 不渲染数学公式（$…$）和 Mermaid 图。
• 代码块高亮支持 JavaScript、TypeScript、Python、Go、PHP、Ruby、Java、Bash、JSON、HTML/XML、CSS 和 Markdown，其他语言显示为普通代码。