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

什么是 HTML 转 Markdown？

HTML 是浏览器显示的已渲染标记 — <h1>、<ul>、<table>、<a> 等等。Markdown 是一种轻量级纯文本格式，使用最少的标点（用 # 表示标题、* 表示强调、- 表示列表项）来编码同样的结构。GitHub Flavored Markdown（GFM）在原始 CommonMark 规范的基础上扩展了表格、删除线、任务列表与自动链接。将 HTML 转为 Markdown，把已渲染或导出的 HTML 拉回可编辑的纯文本 Markdown — 正是 CMS 内容迁移或 README 整理所需要的。

输出支持哪些 GitHub Flavored Markdown 特性？

内置的 turndown@7.2.0 引擎配合 turndown-plugin-gfm 扩展，从您的 HTML 输出完整 GFM 超集：从 <h1>–<h6> 生成 # 至 ###### 的 ATX 风格标题、可嵌套的有序与无序列表、加粗 **text** 与斜体 *text*、从 <del> 生成删除线 ~~text~~、内联链接 [text](url) 与内联图片 ![alt](src)、带语言提示的围栏代码块（```js）、内联代码 `code`、从 <table> 生成管道表格、从 checkbox 输入生成 GFM 任务列表 - [ ] / - [x]、引用块 > 以及水平分割线 ---。预览面板用 marked@12.0.2 重新渲染输出的 Markdown，让您直观地确认转换结果。

HTML 转 Markdown 是如何工作的？

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

1. 净化：粘贴的 HTML 首先经过 DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })，在任何遍历发生之前，移除 <script> 元素、所有 on* 事件处理属性以及 javascript: URI。DOMPurify 是 Mozilla MDN、Atlassian、Microsoft 365 同款的 XSS 净化器。
2. 转换：turndownService.turndown 遍历清洗后的 DOM，输出 GitHub Flavored Markdown — 标题变为 # 前缀，列表变为 - / 1. 条目，<table> 变为管道表格，以此类推。Markdown 通过 value 写入只读输出 <textarea>（而非 innerHTML），因此本质上是安全的。
3. 渲染：输出的 Markdown 由 marked.parse 再次解析，再次经过 DOMPurify 净化，并赋给预览面板的 innerHTML，让您得到视觉确认 — Markdown 往返回预期结构。实时模式会对输入做 150 ms 防抖，让预览在粘贴时持续更新而不会让解析器过载。

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

• 隐私：每次净化、转换与渲染都在你的浏览器中进行。HTML — 包括导出的 CMS 文章、内部文档和机密页面源码 — 永远不会到达我们的服务器。
• 默认 XSS 安全：粘贴的 HTML 在 turndown 遍历之前经过 DOMPurify，预览面板在 innerHTML 之前再次把重新渲染的 HTML 经过 DOMPurify，因此粘贴含 <script> 标签或 onerror= 处理器的标记会得到一段惰性预览和干净的 Markdown。
• 完整 GFM：<table> 元素转为 Markdown 管道表格，<del> 转为删除线，checkbox 列表转为 GFM 任务列表。多数在线转换器在 HTML → Markdown 路径上会丢失表格 — 内置的 turndown-plugin-gfm 扩展会保留它们。

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

将 HTML 转为 Markdown 广泛出现在内容迁移、文档撰写和归档中：

• CMS 迁移：把 WordPress 或 Ghost 的文章导出为 HTML 后转为 Markdown，用于 Hugo / Jekyll / 11ty / Astro 静态站点重建。转换会保留标题层级、链接、列表与内联强调。
• README 整理：粘贴 wiki 页面或网络文章的已渲染 HTML，将其拉回可编辑的 Markdown，用于项目 README 或文档站点 — 而非重新手动输入结构。
• 归档与笔记：捕捉 HTML 邮件或网页剪辑，转为 Markdown 存储在 Obsidian、Notion 或纯文本知识库中 — Markdown 保持 diff 友好，并能经受住格式变迁。

HTML 转 Markdown 的示例是什么样的？

粘贴 <h2>Heading</h2><ul><li>a</li><li>b<ul><li>nested</li></ul></li></ul> 会生成带 ## Heading 的 Markdown、一个嵌套项目符号列表，以及一个能重新渲染回同样嵌套结构的预览。粘贴带表头行和两行数据的 <table> 会生成对应的 | col | col | 管道表格 — 证明转换能保留标题、列表和表格。

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

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

渲染预览面板是 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 协议。粘贴 <img src=x onerror=alert(1)> 会得到一个预览，其中 document.querySelector('#output-preview img[onerror]') 返回 null，且不会触发任何弹窗。

GFM 表格能从 HTML 转换吗？

支持。HTML → Markdown 方向使用 turndown-plugin-gfm，该插件添加了一条自定义 turndown 规则，能遍历 <table> 节点并输出对应的管道表格 Markdown — 一行表头、一行 |---|---| 对齐行，再加数据行。大多数在线转换器会在这条路径上丢失表格；本工具保留它们。删除线（<del>text</del> → ~~text~~）与任务列表（<input type="checkbox"> → - [ ] / - [x]）以相同方式转换。

我的 HTML 能干净地转换吗？

对规范的 GFM 特性集 — h1 到 h6 的标题、可嵌套的有序与无序列表、加粗/斜体/删除线、内联链接、内联图片、带语言标签的围栏代码块、内联代码、管道表格、任务列表、引用块、水平分割线与自动链接 — 转换是干净且可预期的。边缘情况：HTML 注释（<!-- ... -->）会被剥离（Markdown 没有注释语法）；内联样式和 class 属性会被丢弃，因为 Markdown 没有对应概念；不常见的内联标签如 <sub> / <sup> 会转为纯文本。这些是 turndown 的既定行为，并非 bug。

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

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

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