博客多平台发布
博主在 Notion 写好的文章，要同时发布到知乎（支持富文本）和 GitHub Pages（纯 Markdown）。直接复制粘贴，知乎的列表缩进全乱，GitHub 的代码块高亮丢失。用本工具先把 Notion 导出的 HTML 转成 GitHub Flavored Markdown，再切到 CommonMark 风格适配知乎编辑器，两版各归其位，不用手动改 20 处缩进。
MARKDOWN 轻量标记语言
HTML HyperText Markup Language
预 览HTML 实时渲染（赤金样式）
就绪 · 左侧填 Markdown 或右侧填 HTML，另一侧自动互转，全程本地处理
第一节
关于本工具
About写技术文档时，Markdown 转 HTML 预览总差几像素，或从富文本编辑器粘贴的 HTML 想回 Markdown 却乱掉。这个工具把两种语法互相翻译，支持 GitHub Flavored Markdown、CommonMark 等多套风格，转出的 HTML 标签闭合、缩进规整，不额外加样式。纯浏览器处理，内容不上传服务器——本地改完即得干净代码，适合写 API 文档、维护静态博客、或从 CMS 导出时清洗格式。
使用场景
技术文档转官网页面
开发团队用 Markdown 维护的 API 文档，要发布到公司官网（基于 Jekyll）。但官网模板要求 HTML 格式，且代码块需包裹 <pre><code> 并带 lang 属性。手动转换 50 个接口文件，每篇要加 3 层标签。用本工具将 MD 批量转为 HTML，勾选「保留语言标识」选项，输出直接粘贴到 Jekyll 的 _includes 文件夹，上线前只花了 10 分钟检查超链接。
邮件模板转纯文本备份
市场部用 HTML 设计的促销邮件，需存档到内部知识库（只支持 Markdown）。原邮件有 8 层嵌套表格、3 种字体颜色、2 张图片。直接复制 HTML 到知识库，表格变形、颜色代码显示为乱码。用本工具将 HTML 转为 Markdown，自动剥离样式标签，保留标题层级和列表结构，图片转为  格式，存档后搜索「促销」能直接定位到段落。
论坛帖子迁移格式修复
老论坛（Discuz!）导出 200 篇帖子，格式是带 [b] 标签的 HTML。新论坛（Flarum）只认 Markdown。直接导入后，加粗文字显示为 [b] 原文，列表项挤成一行。用本工具将 HTML 转为 Markdown，勾选「Discuz! 兼容模式」，自动将 [b] 映射为 **，[list] 映射为 - 列表，200 篇帖子 3 分钟转换完毕，只有 2 篇因含自定义代码块需手动微调。
课程讲义双格式输出
讲师用 Markdown 写教案，但学生需要 PDF（含代码高亮）和网页版（含交互式演示）。直接转为 PDF 时，代码块行号丢失；转为 HTML 后，数学公式渲染异常。用本工具将 MD 转为 HTML，选择「GitHub 风格」保留代码块行号，再手动加 <script> 标签引入 MathJax 渲染公式。两份输出：一份打印版（无交互元素），一份网页版（带折叠框和视频嵌入），学生反馈「代码能直接复制运行」。
第二节
使用指南
Getting Started使用步骤
- 1在左侧编辑区粘贴或键入 Markdown 文本，右侧预览区同步渲染 HTML 效果，无需点击任何按钮
- 2点击「HTML → MD」按钮切换转换方向，输入框内容自动清空，等待重新输入
- 3从「MD 风格」下拉菜单选择 GitHub / CommonMark / 标准 Markdown，转换结果按该风格输出
- 4点击「复制」按钮将转换结果写入剪贴板，按钮短暂显示「已复制」反馈
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| # 标题 **加粗** *斜体* `代码` | <h1>标题</h1> <p><strong>加粗</strong> <em>斜体</em> <code>代码</code></p> | 常规：最基础的 Markdown 语法，验证标题、加粗、斜体、行内代码的转换正确性 |
| - 列表项1 - 列表项2 - 嵌套项 | <ul> <li>列表项1</li> <li>列表项2 <ul> <li>嵌套项</li> </ul> </li> </ul> | 常规：无序列表与嵌套，验证缩进层级处理是否正确 |
| 边界：空输入，验证工具是否返回空字符串而非报错或多余标签 | ||
| # 标题 段落1 段落2 | <h1>标题</h1> <p>段落1</p> <p>段落2</p> | 边界：连续空行分隔的段落，验证空行处理是否产生多余 <br> 或丢失段落 |
| ```python print('hello') ``` | <pre><code class="language-python">print('hello') </code></pre> | 边界：代码块带语言标识，验证 class 属性是否正确生成 |
| [链接](https://example.com) 和  | <p><a href="https://example.com">链接</a> 和 <img src="img.png" alt="图片" /></p> | 易错：链接与图片语法相似，验证工具能否正确区分 a 标签和 img 标签 |
| > 引用 > 多行 > > 嵌套引用 | <blockquote> <p>引用 多行</p> <blockquote> <p>嵌套引用</p> </blockquote> </blockquote> | 易错：嵌套引用块，验证 blockquote 层级嵌套是否正确，多行引用是否合并为同一段落 |
常见错误对照
1.Markdown 列表缩进不一致导致 HTML 嵌套层级错乱
✗ 错误
- 一级
- 二级
- 三级
- 二级（缩进空格数不同）✓ 修复
- 一级
- 二级
- 三级
- 二级（与上一行缩进一致）Markdown 列表嵌套依赖严格的缩进（通常 2 或 4 空格），缩进不一致会被解析为同级列表，破坏 HTML 的 <ul><li> 层级结构。
2.代码块语言标识符后漏空格，高亮失效
✗ 错误
```python
print('hello')
```✓ 修复
```python
print('hello')
```围栏代码块的语言标识符（如 python）必须紧跟三个反引号、无空格，否则解析器可能不识别语言，导致 HTML 中 <code> 缺少 class 属性，前端高亮库无法生效。
3.HTML 转 Markdown 时，<br> 被错误转为两个空格而非换行
✗ 错误
第一行<br>第二行 → 转换后：第一行
第二行✓ 修复
第一行<br>第二行 → 转换后：第一行
第二行CommonMark 规范中，行尾两个空格加换行才生成 <br>；反之，<br> 应转为 而非 ，否则再转回 HTML 时会多出空格。
4.表格中管道符未转义，导致列错位
✗ 错误
| 列1 | 列2 |
| --- | --- |
| 值 | a|b |✓ 修复
| 列1 | 列2 |
| --- | --- |
| 值 | a\|b |Markdown 表格用 | 分隔列，单元格内若含 | 必须用 \| 转义，否则解析器会将其视为新列边界，导致 HTML 表格列数错乱。
5.HTML 转 Markdown 时，<img> 的 alt 属性被丢弃
✗ 错误
<img src="cat.jpg" alt="一只猫"> → 转换后：✓ 修复
<img src="cat.jpg" alt="一只猫"> → 转换后：Markdown 图片语法  中 alt 文本是必填项，多数转换器会保留 alt；若丢失，说明工具未正确提取属性，需检查转换器实现。
6.标题后未加空格，被解析为普通文本
✗ 错误
#标题✓ 修复
# 标题ATX 标题要求 # 后紧跟一个空格，否则多数解析器（如 marked、remark）将其视为普通文本，不会生成 <h1>。
7.HTML 转 Markdown 时，<strong> 嵌套 <em> 顺序反转
✗ 错误
<strong><em>加粗斜体</em></strong> → 转换后：***加粗斜体***✓ 修复
<strong><em>加粗斜体</em></strong> → 转换后：**_加粗斜体_**Markdown 中 *** 或 ___ 是 <em><strong> 的简写，但顺序与 HTML 标签嵌套顺序对应；若工具输出 ***，再转回 HTML 时可能变成 <em><strong>，语义错误。
8.链接中 URL 包含空格未编码，导致链接断裂
✗ 错误
[文档](https://example.com/my file.pdf)✓ 修复
[文档](https://example.com/my%20file.pdf)Markdown 链接 URL 中空格必须用 %20 编码，否则解析器可能截断 URL，生成 <a> 的 href 属性值错误，点击后跳转失败。
第三节
工作原理
How It Works核心公式
HTML = MD → AST → render(HTML, style=Github|CommonMark|GFM)
变量说明
MDMarkdown 源文本，含标题/列表/代码等AST抽象语法树，解析 MD 后的中间结构style渲染风格：GitHub/CommonMark/GFM
示例
输入 MD：`# Hello` + `- item1`。解析为 AST：heading(level=1, text='Hello') + list(unordered, items=['item1'])。按 GFM 风格渲染：`<h1>Hello</h1><ul><li>item1</li></ul>`。反向转换时，HTML 先解析为 AST，再序列化为 MD：`<h1>Hello</h1>` → heading(level=1) → `# Hello`。
用户输入 / 输出
本地处理
规则与配置
第五节
常见问题
Q & A问我这个 Markdown 里嵌了表格和代码块，转成 HTML 会不会乱？＋
答
本工具对 GFM（GitHub Flavored Markdown）标准支持较好，表格、代码块、列表、引用等常见语法都能正确转换。但如果你用了某些非标准扩展（如自定义属性、内嵌 LaTeX 或 Mermaid 图表），转换后可能不保留原效果。建议先粘贴一小段带表格和代码块的示例预览，确认无误后再处理全文。如果遇到表格对齐丢失，可以检查原 Markdown 中分隔行是否使用了合法的冒号对齐语法。
问转换出来的 HTML 代码里为什么多了很多 <p> 标签？＋
答
这是标准 Markdown 转 HTML 的规范行为。Markdown 中的空行会被解析为段落分隔符，自然生成 <p> 标签包裹文本块。如果你希望输出更紧凑（比如只保留 <br> 换行），可以勾选结果区上方的「紧凑模式」选项。此外，本工具支持多种 MD 风格，切换为「CommonMark」或「Strict」风格时，段落处理规则略有不同，可以对比选择最适合你需求的输出格式。
问我想把一段带样式的 HTML 转回 Markdown，但图片链接和加粗都丢了，为什么？＋
答
HTML 转 Markdown 属于逆向转换，并非所有 HTML 标签都有对应的 Markdown 语法。本工具对 <img>、<strong>、<em>、<a> 等基础内联标签支持良好，但复杂属性（如 style、class、data-*）会直接丢弃。另外，如果原 HTML 中图片用了相对路径或 base64 编码，转成 Markdown 后可能显示异常。建议先手动检查 HTML 源码结构，确保标签嵌套简单规范，再执行转换。
问这个工具是纯前端转换吗？我的内容会不会上传到服务器？＋
答
本工具是纯前端实现，所有转换逻辑在浏览器本地完成，内容不会离开你的设备。粘贴的 Markdown 或 HTML 文本只在内存中处理，页面刷新后即清除。不依赖后端接口，因此也支持离线使用（首次加载后断网仍可运行）。如果你处理的是内部文档或敏感信息，可以放心使用。
问为什么我转出来的 HTML 里中文字符变成了乱码？＋
答
本工具默认输出 UTF-8 编码的 HTML，现代浏览器通常能正确显示。出现乱码通常有两个原因：一是原 Markdown 文件本身编码不是 UTF-8（如 GBK），粘贴前建议用编辑器另存为 UTF-8 再复制；二是转换后的 HTML 缺少 <meta charset="UTF-8"> 声明，本工具结果区已自动添加该声明，但如果你只复制了 <body> 内的片段，引入其他页面时需手动确认编码一致。
问我的 Markdown 文件有几百行，这个工具能一次处理完吗？＋
答
可以，本工具没有行数或字符数上限，纯前端处理不依赖网络传输，因此大文件转换速度主要取决于浏览器性能。实测一万行左右的 Markdown 文档，在主流浏览器上转换耗时约 1-2 秒。如果遇到卡顿，建议分段落粘贴排查是否有个别异常语法导致解析阻塞。另外，超大内容复制粘贴时注意浏览器剪贴板限制，建议直接拖拽文件到页面（部分浏览器支持）。
问这个工具和网上的在线 Markdown 编辑器有什么区别？＋
答
本工具专注于「格式转换」而非「编辑预览」。在线编辑器通常提供实时预览、主题切换、文件管理等功能，更适合写作场景；而本工具的核心是双向精确转换，支持多种 MD 风格（如 GFM、CommonMark、Strict），并保留原始格式细节。如果你需要批量将 Markdown 文档转为 HTML 用于发布，或者将现有 HTML 还原为 Markdown 进行迁移，本工具比编辑器更高效直接。
问转换后生成的 HTML 代码里有一些我不认识的 class 或 data 属性，是正常的吗？＋
答
本工具默认输出纯语义标签，不会额外添加 class 或 data 属性。如果看到类似 class="hljs" 或 data-line 等属性，可能是你粘贴的 Markdown 中包含了代码块，并且勾选了「语法高亮」选项。这些属性用于前端高亮库识别语言，不影响 HTML 结构。如果不希望出现这些属性，可以在转换前取消勾选「语法高亮」或选择「纯净输出」模式。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。