把HTML转换成干净的Markdown

如何把HTML转换成Markdown

1. 添加HTML。把标记代码粘贴到输入框，打开本地的.html文件，或者复制任意网页的一部分再粘贴：开启富文本粘贴后，转换器会从剪贴板读取带格式的HTML，而不是纯文本。
2. 链接是相对路径时，设置基础网址。从页面源码中复制出来的标记，链接常常是/docs/setup这种形式。填入该页面的地址后，所有相对链接和图片都会变成绝对地址。
3. 选择Markdown风格。默认设置（ATX标题、短横线列表、围栏代码、行内链接、开启GFM）适用于GitHub、GitLab、Obsidian、大多数静态网站生成器和AI工具。
4. 复制或下载。结果会随着输入实时更新。你可以复制到剪贴板，也可以保存为以第一个标题命名的.md文件。

逐个元素看会转换成什么

Markdown的“词汇量”比HTML小得多，所以转换器真正要做的，是决定每个元素最终变成什么。本工具的处理方式如下：

• 标题 <h1>–<h6>会变成#到######。Setext风格只能给H1和H2加下划线，因为语法只支持这两级；H3及以下仍然使用#。
• 粗体和斜体（<strong>、<b>、<em>、<i>）使用你选择的符号。
• 链接会变成[文字](网址 "标题")；选择引用式链接时，则变成编号引用，并集中放在文档末尾。会执行脚本的链接（javascript:）或带有data:内容的链接，只保留文字。
• 图片会变成![替代文字](地址)。把真实地址放在data-src里的懒加载图片也能识别。行内的data:图片会被丢弃，因为一大段base64会让Markdown文件无法阅读。
• 列表，包括嵌套多层的列表，会缩进到其父项之下。有序列表保留start起始编号，从4开始的列表仍然从4开始。
• 引用块会变成以>开头的行，嵌套的引用也一样。
• 代码：行内<code>变成反引号；<pre>块变成围栏代码块，声明了语言时会带上语言（见下文）。
• 表格会变成GFM管道表格。细节和限制见下一节。
• 删除线和任务列表：<del>、<s>和<strike>变成~~文字~~；以复选框开头的列表项变成- [ ]或- [x]。
• 完全移除：<script>、<style>、<noscript>、<template>、iframe、embed、SVG和canvas。<div>、<span>这类布局容器会被拆开，只保留其中的文字，这正是Markdown比原HTML更小巧、更易读的原因。

表格：Markdown能装什么，不能装什么

GitHub Flavored Markdown规范把表格定义为一行表头、一行由短横线组成的分隔行，以及若干正文行。规范中的三条规则决定了HTML表格如何转换：

• 必须有表头行。很多HTML表格，尤其是从电子表格或老式CMS页面粘贴来的，根本没有<th>单元格，不处理就无法变成管道表格，所以转换器默认把第一行当作表头。如果你更想把这类表格保留为HTML，请取消勾选该选项。
• 单元格内不能放块级内容。规范指出表格中不能插入块级元素，因此单元格内的段落和换行会被压成一行。单元格中的列表会失去结构；如果表格里装的是丰富内容，不妨保留为HTML。
• 竖线必须转义。单元格里的|会开启一个新列，所以转换器把它写成\|，规范允许在单元格的任何位置这样写，包括行内代码里。

合并单元格得到部分支持：带有colspan="3"的单元格后面会补上两个空单元格，保证各列对齐。跨行（rowspan）在Markdown中没有对应写法，无法还原。<caption>会被移到表格上方，成为单独的一段；align属性指定的列对齐方式，会在分隔行里变成:--、:-:或--:。

代码块与语法高亮

围栏代码块可以在开头围栏后面带一个信息字符串，例如```python，渲染器会据此给代码着色。转换器会到高亮工具放置语言信息的几个位置去找：language-*和lang-*类名（Prism、highlight.js以及大多数Markdown渲染器），GitHub的highlight-source-*外层容器，以及data-lang或data-language属性。没有内部<code>元素的<pre>，同样会被当成代码块，而不是被转义的普通文字。

代码文本会原样提取，所以高亮工具生成的标记（那些带颜色的<span>元素）会消失，而代码本身不受影响。如果代码里本身含有连续三个反引号，围栏会比这段反引号更长，因为规范要求结尾围栏至少和开头围栏一样长；这样，讲解Markdown的Markdown文档也不会被破坏。

各个选项说明

ATX还是Setext标题

ATX标题（# 标题）适用于全部六级标题，几乎所有工具都认。Setext标题用===或---给文字加下划线；一些风格指南喜欢用它来写H1和H2，但它无法表示H3及以下的级别。

行内链接还是引用式链接

行内链接把每个网址放在文字旁边，适合篇幅短的文档和AI提示词。引用式链接把网址挪到底部的编号列表里，让长段落在纯文本编辑器里依然好读，在文档仓库中很常见。

转义Markdown字符

像2024. 美好的一年或file_name_here这样的文字，会被误认为列表或斜体，所以转换器用反斜杠对这些字符转义。对于要渲染的内容，这样做是对的。如果输出要放进和AI模型的对话、搜索索引或纯文本笔记，取消转义可以得到更干净的文字。

基础网址

相对网址只在它所在的页面上才有意义。设置基础网址后，https://example.com/blog/post上的../images/chart.png会变成https://example.com/images/chart.png，解析规则与浏览器相同。

转换整个网页

本转换器不会抓取网址。浏览器中的页面无法读取其他网站的HTML，除非对方允许；而且很多现代页面是加载后才用JavaScript拼出内容的，所以在服务器端抓取往往只能得到一个空壳。从渲染好的页面上复制可以同时避开这两个问题：选中文章，复制，粘贴到这里。你得到的是真正看到的文字，带着链接和格式，而没有你没选中的导航栏、Cookie提示条和广告。如果你想提取页面中的所有链接，请使用链接提取工具。

常见问题与解决办法

• 输出里的表格是HTML。要么GFM没开，要么表头提升没开且表格没有表头行。把对应选项重新打开即可。
• 链接指向了错误的地方。它们是相对链接。把该页面的地址填进基础网址。
• 换行看起来怪怪的。<br>会变成行尾两个空格加换行，也就是CommonMark的硬换行。有些编辑器保存时会删掉行尾空格，让它变回软换行。
• 文字缺失。如果HTML来自一个大量使用JavaScript的网站的“查看源代码”，内容可能根本不在标记里。请改为从渲染后的页面复制。
• 所有内容挤成一段。源页面用<div>而不是<p>来分段。Markdown只认语义化元素，所以用带样式的div拼出来的页面，转换后就成了一整段文字。

为什么要把HTML转换成Markdown？

Markdown保留有意义的部分（标题、强调、链接、列表、表格、引用和代码），丢掉布局标记和行内样式。这让内容更容易编辑，更方便在版本管理中审阅，更容易迁入Obsidian这样的知识库或文档站，也更适合交给AI模型而不必把上下文浪费在class属性上。开发者用它把CMS内容迁移到静态网站；写作者用它在不同编辑器之间转移草稿；研究者用它保存干净的资料副本。如果你是在收集资料而不是转换资料，Marqly可以把研究资料的链接整理进同一个可搜索的资料库；面向开发者的页面则介绍了保存下来的文档和代码片段如何保持可检索。

隐私优先的设计

转换器使用开源的Turndown库及其GitHub风格Markdown插件，加上本页面自己的表格、代码和链接处理逻辑，全部打包在页面里。页面加载后可以离线使用，你粘贴的文字、文件和设置都留在你的设备上。如果想在转换前后快速估算篇幅，阅读时间计算器同样在本地统计字数。