Markdown 转 HTML 转换器 — 在线将 Markdown 转为 HTML _

什么是 Markdown 转 HTML？

Markdown 是一种轻量级纯文本格式，使用最少的标点（用 # 表示标题、* 表示强调、- 表示列表项）来编码结构化文章。GitHub Flavored Markdown（GFM）在原始 CommonMark 规范的基础上扩展了表格、删除线、任务列表与自动链接。HTML 则是浏览器最终呈现的形式。将 Markdown 转为 HTML，让你既能用轻量语法撰写，又能输出到渲染界面 — 一个 README、静态站页面或邮件正文 — 无需手写标签。

支持哪些 GitHub Flavored Markdown 特性？

内置的 marked@12.0.2 解析器支持完整 GFM 超集：从 # 到 ###### 的 ATX 风格标题、可嵌套的有序与无序列表、加粗 **text** 与斜体 *text*、删除线 ~~text~~、内联链接 [text](url) 与内联图片 ![alt](src)、可带语言标签的围栏代码块（```js）、内联代码 `code`、带表头行的管道表格、GFM 任务列表 - [ ] / - [x]、引用块 >、水平分割线 --- 以及自动链接。每个元素在预览面板中的渲染效果与 GitHub 完全一致。

Markdown 转 HTML 是如何工作的？

每一次转换都在你的浏览器中使用两个内置库本地运行 — 无 CDN、无 fetch、无遥测。高层步骤如下：

1. 解析：marked.parse(source) 读取你的 Markdown 并产出一段 HTML 字符串。解析器在 GFM 模式下运行，因此表格、任务列表、删除线和自动链接都能被识别。
2. 净化：HTML 输出在赋给 innerHTML 之前会经过 DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })。DOMPurify 是 Mozilla MDN、Atlassian、Microsoft 365 同款的 XSS 净化器 — 它会解析 HTML、遍历 DOM，并移除 <script> 元素、所有 on* 事件处理属性以及 javascript: URI 协议。
3. 渲染：净化后的 HTML 通过 innerHTML 写入预览面板，原始 HTML 则通过只读 <textarea> 在第二个面板中呈现，方便你复制标记。实时模式会对输入做 150 ms 防抖，让预览在你输入时持续更新而不会让解析器过载。

为什么使用此工具将 Markdown 转为 HTML？

• 隐私：每次解析、净化与渲染都在你的浏览器中进行。Markdown — 包括未发布的博客文章、内部文档草稿、机密 README 内容 — 永远不会到达我们的服务器。
• 默认 XSS 安全：渲染预览面板会把每一段 HTML 字符串先经过 DOMPurify 再喂给 innerHTML，因此 Markdown 中混入的 <script> 标签或 onerror= 处理器只会得到一段惰性预览。原始面板虽然展示未净化字符串，但它位于只读 <textarea> 的 value 中 — 不会被执行。
• 完整 GFM：表格、删除线、任务列表与自动链接的渲染效果与 GitHub 完全一致。Markdown 管道表格会生成带有 <thead> 和 <tbody> 的 HTML <table> — 不丢行，不压平结构。

Markdown 转 HTML 的常见应用场景有哪些？

将 Markdown 变为 HTML 广泛出现在文档、静态站建设和邮件撰写中：

• GitHub README 撰写：在本地以 Markdown 起草项目 README，并在推送前预览渲染后的 HTML。预览效果与 GitHub 的 GFM 渲染器在表格、任务列表与围栏代码上一致。
• 静态站内容：粘贴一篇 Markdown 文章并获取 HTML，用于期望标记而非 Markdown 源码的 CMS 字段或模板引擎。
• 邮件模板：以 Markdown 撰写事务邮件正文，再转换为 HTML 供邮件服务商的模板引擎使用。输出是干净的语义化 HTML — 没有内联样式，也没有邮件客户端的奇怪样式覆盖。

Markdown 转 HTML 示例长什么样？

粘贴 # Title\n\n- item 1\n- item 2\n\n[link](https://example.com)，预览面板会包含 <h1>Title</h1>、两项无序列表以及一个 <a href="https://example.com">link</a>。原始面板显示精确的 HTML 字符串，方便你直接粘入模板。带有 |---|---| 对齐行的管道表格会生成带 <thead> 和 <tbody> 的完整 <table> — 确认 GFM 表格的渲染效果与 GitHub 一致。

这个 Markdown 转 HTML 转换器完全在我的浏览器中运行吗？

是的。每一次解析、净化与渲染都作为 JavaScript 在你的浏览器标签页中本地运行。两个内置库 — marked@12.0.2 与 DOMPurify@3.1.7 — 与页面同源加载，因此没有 CDN 依赖、没有 fetch、没有 XMLHttpRequest、也不会用 navigator.sendBeacon 上报输入。页面加载后该工具也能离线使用，因为它是一个把第三方库与自身打包在一起的静态 HTML/CSS/JS 包。未发布的文章、内部文档与机密 README 都留在你的设备上。

渲染预览面板是 XSS 安全的吗？

是的。每一段赋给 innerHTML 的 HTML 字符串都会先经过 DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })。DOMPurify 是 Cure53 维护的开源 XSS 净化器，也是 Mozilla MDN、Atlassian、Microsoft 365 用来加固用户提供 HTML 的同款库。默认的 html 配置会移除 <script> 元素、所有 on* 事件处理属性（onerror、onclick 等）、href / src 中的 javascript: URI 协议，以及已知的危险 CSS 表达式。粘贴 <img src=x onerror=alert(1)> 会得到一个预览，其中 document.querySelector('#output-preview img[onerror]') 返回 null，且不会触发任何弹窗。

GFM 表格受支持吗？

支持。Markdown → HTML 方向通过 marked 的 GFM 模式原生处理管道表格 — 一行表头加上 |---|---| 对齐行，再加上数据行，会生成带 <thead> 与 <tbody> 的 <table>。删除线（~~text~~ → <del>text</del>）与任务列表（- [ ] / - [x] → <input type="checkbox">）的渲染效果与 GitHub 完全一致。

我的 Markdown 能无损转换吗？

对规范的 GFM 特性集 — h1 到 h6 的标题、可嵌套的有序与无序列表、加粗/斜体/删除线、内联链接、内联图片、带语言标签的围栏代码块、内联代码、管道表格、任务列表、引用块、水平分割线与自动链接 — HTML 输出是稳定的，且与 GitHub 的渲染器一致。几个值得了解的行为：Markdown 中嵌入的原始内联 HTML（如 <sub>text</sub>）会原样透传到输出，而 CommonMark 的 setext 风格标题（=== 下划线）与 ATX 标题（# Title）都会生成同一个 <h1>。这些是 marked 的既定行为，并非 bug。如果你需要反向转换，将渲染后的 HTML 拉回 Markdown，请使用 HTML 转 Markdown 工具。

围栏代码块支持语法高亮吗？

v1 中不支持。围栏代码块以等宽字体与淡淡背景渲染，但没有按语言的词法着色。引入语法高亮需要打包 Prism 或 highlight.js，每个都会增加 15–40 KB，加上一组按语言的语法文件以及一套需要与 Workshop Terminal 配色对齐的主题矩阵。当前渲染器把重点放在正确性与 XSS 安全上；若用户对内联高亮有需求，做成可选开关是个可行的后续改进。

本 Markdown 转 HTML 转换器内置了 marked@12.0.2 以及 DOMPurify@3.1.7 并与页面同源加载，支持完整的 GFM 特性集，并在每一段渲染后的 HTML 字符串触及 DOM 之前进行净化。无上传、无 CDN、无遥测 — 每一个字节都留在你的浏览器中。