Markdown 预览

什么是 Markdown 渲染器？#

Markdown 是开发者用来写富文本的纯文本速记法：**加粗**、# 标题、- 列表、`代码`。渲染器就是把这种速记符号翻译成浏览器真正能显示的 HTML 的程序。README 文件、文档站点、问题追踪器的评论、聊天应用、静态站点生成器，在把内容呈现给你之前，都要先让 Markdown 走一遍渲染器。

本页是一个 Markdown 渲染器，但有一条特别的设计主线：它靠”构造方式”保证安全，而不是靠”事后过滤”。多数渲染器是先把 Markdown 转成 HTML，再试图把危险标签擦掉——这种模式下，漏掉一条正则就意味着一个 XSS 漏洞。本工具反其道而行：在任何格式化动作发生之前，源文本的每一个字符就已经被 HTML 转义过了，而它最终能输出的标签只来自一个硬编码的固定白名单（p、h1–h6、ul、ol、li、blockquote、pre、code、hr、a、img、strong、em、del、br）。输入里根本不存在任何代码路径能产出一个 <script> 标签，因为源里的裸 < 在格式化器看到它之前就已经被转义成了 <。正是这一点，让它能适用于像本站这样执行严格 CSP 的静态站点。

它实现了 CommonMark 的一个聚焦子集，外加 GitHub-Flavored Markdown 的几项必备：围栏代码块、ATX 标题、段落、有序/无序列表、引用块、分隔线（---）、行内代码、加粗、斜体、删除线、图片、链接、以及尖括号自动链接。同一份输入会同时给你两种输出——渲染预览和原始 HTML——让你看得清清楚楚渲染器到底产出了什么。

如何使用#

1. 在左侧输入区敲 Markdown，或点击 Sample（示例）载入一份内置文档，把支持的所有语法都跑一遍。
2. 用右侧上方两个按钮切换输出：
   • Rendered（渲染）按网页上的样子显示格式化结果。
   • View HTML（查看 HTML）显示渲染器输出的确切 HTML——也就是你会粘进模板、或交给安全审计的那段。
3. 点击 Copy HTML（复制 HTML）把生成的 HTML 取走，粘进 CMS、嵌进模板，或走一遍审查。
4. 点击 Clear（清空）清空两侧。
5. 状态行会报告渲染后的字节长度，或提示输入为空。

主要特性#

• 构造即安全。 源文本在格式化前已全部 HTML 转义，渲染器只输出固定白名单内的标签。没有”先产出再擦危险部分”这一步可以被搞错。
• 拦截危险 URL scheme。 链接和图片的 URL 会做 scheme 校验；javascript:、vbscript:、data:、file:、about: 一律拦截，原文本原样显示，不会变成一个活的链接。
• 一源两视图。 在渲染预览和原始 HTML 之间切换无需重敲，视觉结果和它产出的标记都能核对。
• 涵盖 GFM 必备。 删除线（~~文本~~）、带语言提示的围栏代码块、对任务友好的列表，都按 GitHub-Flavored Markdown 的方式工作。
• 零依赖、100% 客户端。 渲染器是自实现的——不引入任何解析库——全程在浏览器本地运行。不上传任何内容，也没有后端可以注入。

实战示例#

点击 Sample，左侧会填入一份覆盖核心语法的文档：

# Heading

A paragraph with **bold**, *italic*, ~~strike~~ and `inline code`.

- bullet one
- bullet two

1. first
2. second

> A blockquote.

[a link](https://example.com)

\`\`\`
const x = 42;
console.log(x);
\`\`\`

切到 View HTML，你会看到渲染器输出的确切内容。那段段落会变成：

<p>A paragraph with <strong>bold</strong>, <em>italic</em>,
<del>strike</del> and <code>inline code</code>.</p>

链接会带上安全的 rel 属性、成为一个”硬目标”链接：

<a href="https://example.com" rel="noopener noreferrer" target="_blank">a link</a>

而围栏块会变成一个转义过的 <pre><code>，源码逐字保留——const x = 42; 显示为文本，而不是被执行的脚本。这最后一点，几乎浓缩了全部的安全故事：即便你在源里粘了 <script>alert(1)</script>，它也会渲染成字面文本 <script>alert(1)</script>，因为那个 < 在格式化器决定什么是标签之前，就已经被转义成了 <。

常见问题#

既然我可以直接写 HTML，为什么还要用这个？#

因为 Markdown 打字更快、源码形式更易读，也让不懂 HTML 的协作者能写内容。本渲染器适合这样的场景：你想要 Markdown 的便利，又不想把”是否安全”押在一个通用解析库上——这里的安全来自架构本身，而不是事后拼装的一个 sanitizer。

我粘了一个 <script> 标签，它显示成了文本，这是 bug 吗？#

不是——这正是预期行为，也是核心安全保证。输入的每一个字符在格式化前都已 HTML 转义，所以源里任何像标签的文本都会渲染成惰性的可见文本。通过本渲染器，没有任何办法把一个活的 <script> 写进输出。

我的 javascript: 链接为什么显示成了纯文本？#

渲染器对每个链接和图片的 URL 都做 scheme 校验。javascript:、vbscript:、data:、file:、about: 这类 scheme 会被拦截，因为它们是注入攻击的经典载体。URL 被拦截时，渲染器会把原始 Markdown 源文本原样保留，而不是产出一个危险的锚点。

它支持表格、任务列表或脚注吗？#

不支持——这是 CommonMark 加 GFM 必备项（围栏代码、删除线、自动链接）的一个刻意聚焦的子集。表格和脚注需要更丰富的解析器，也意味着要盯防更大的攻击面，本工具有意不纳入。请使用上面特性里列出的那些受支持语法。