Skip to content

Markdown 转 HTML 转换器

在浏览器中将 Markdown 转换为 HTML——完整支持 GitHub Flavored Markdown、实时预览、语法高亮。可导出 HTML 片段、完整文档，或邮件安全的内联样式 HTML。100% 私密，无需上传。

无追踪 浏览器中运行 免费
一切都在你的浏览器中运行。你的 Markdown 和 HTML 绝不会离开你的设备。
Markdown
预览
自定义 CSS
HTML
已对照 CommonMark/GFM 规范行为、防 XSS 沙箱渲染和邮件 HTML 内联进行验证 — Go Tools 工程团队 · 2026年6月5日

什么是 Markdown 转 HTML？

Markdown 转 HTML 会把一份用 Markdown 编写的纯文本文档——用 `#` 表示标题、`**bold**`、用 `- ` 表示列表、用 `[text](url)` 表示链接——转换成浏览器、内容管理系统和邮件客户端真正显示的 HTML。Markdown 的设计目标是原样可读、易于书写，但浏览器并不理解 `# Heading`；它理解的是 <h1>Heading</h1>。转换正是弥合这道鸿沟。

在底层，Markdown 处理器先把你的源文档解析成一棵抽象语法树（AST）——一种结构化表示，其中标题、段落、列表和代码块各自是带有内容和属性的不同节点。随后它把那棵树序列化为 HTML，输出正确的标签与嵌套。通过 AST 处理，而不是用正则表达式替换文本，正是转换器能正确且可预测地处理嵌套列表、表格和嵌入式 HTML 的原因。两种公认的语法是 CommonMark（精确的标准）和 GitHub Flavored Markdown（GFM），后者在其之上扩展了表格、任务列表、删除线和自动链接。

之所以要转换，是因为几乎每一个发布目标都想要 HTML 而非 Markdown。静态站点生成器、CMS 富文本字段、邮件模板和浏览器标签页，渲染的都是 HTML。所以典型的工作流是用舒适的 Markdown 来写——README、文档、博客草稿、笔记——并在发布时转换为 HTML。本工具在本地完成这一转换并显示实时预览，让你看到渲染结果，并以你需要的形态复制确切的 HTML：片段、完整页面，或邮件就绪的内联样式标记。

反向操作——HTML 转回 Markdown——在你把现有网页内容迁入基于 Markdown 的系统时同样有用。为此，请切换到 HTML → Markdown 标签页，或打开专门的 HTML 转 Markdown 转换器。

Markdown in:

  # Release Notes

  We shipped **tables** and `code`:

  | Feature | Status |
  | ------- | ------ |
  | GFM     | Done   |

  - [x] Parse to an AST
  - [ ] Profit

HTML out:

  <h1>Release Notes</h1>
  <p>We shipped <strong>tables</strong> and <code>code</code>:</p>
  <table>
    <thead><tr><th>Feature</th><th>Status</th></tr></thead>
    <tbody><tr><td>GFM</td><td>Done</td></tr></tbody>
  </table>
  <ul class="contains-task-list">
    <li class="task-list-item"><input type="checkbox" checked disabled> Parse to an AST</li>
    <li class="task-list-item"><input type="checkbox" disabled> Profit</li>
  </ul>

核心功能

实时分栏预览

在左侧输入 Markdown，看着它在右侧实时渲染，下方的 HTML 输出也随之构建。预览在沙箱 iframe 中渲染，所以你所见即浏览器所示——而粘贴进来的脚本无法运行。

完整的 GitHub Flavored Markdown

不止 CommonMark——而是完整的 GFM 超集：管道表格、任务列表（`- [x]`）、删除线（`~~`）、自动链接的 URL，以及围栏代码块。为 GitHub 写的 README 或 issue 在这里的渲染与那边完全一致。

语法高亮

用语言名标注围栏代码块（```js、```python、```sql），转换器就会高亮它，把 token 包进带语言类的 span 中，并在 <code> 元素上加类。在你的页面上配合一份高亮样式表即可着色。

三种输出格式

导出 HTML 片段（用于模板或 CMS 的正文标记）、完整文档（可另存为 .html 的独立 页面），或邮件内联 HTML——样式被搬到每个元素上，让 Outlook 等客户端正确渲染。

自定义 CSS 面板

把你自己的 CSS 注入实时预览，以匹配某站点的排版或模仿 GitHub 的 README 样式。输入像 h1 { color: #0969da; } 这样的规则，预览会即时更新，而不触动你复制出去的干净 HTML。

GFM 语法速查表

一份产出 HTML 的语法快速参考：`# H1` → 标题、`**bold**` → <strong>、`*italic*` → <em>、`- item` → 列表、`1. item` → 有序列表、`[text](url)` → 链接、`` `code` `` → 内联代码、` ```lang ` → 围栏代码、`> quote` → 引用块、`| a | b |` → 表格、`- [ ]` → 任务列表、`~~text~~` → 删除线。

100% 私密，浏览器内运行

每一次转换都用 JavaScript 在本地进行——你的 Markdown 和 HTML 绝不离开你的设备，绝不触及服务器，并在页面加载后离线工作。可安全用于未发布的文档、内部 README 和禁运期的发布说明。

示例

GFM 表格转 HTML <table>

| Tool | Speed |
| ---- | ----- |
| GFM  | Fast  |
<table>
<thead><tr><th>Tool</th><th>Speed</th></tr></thead>
<tbody><tr><td>GFM</td><td>Fast</td></tr></tbody>
</table>

GitHub Flavored Markdown 的管道表格并不属于纯 CommonMark，但本转换器能识别它们，并生成带 <thead> 和 <tbody> 的规范语义 <table>——可直接用于设置样式或放进 CMS。

任务列表转复选框 HTML

- [x] Write the README
- [ ] Convert it to HTML
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" checked disabled> Write the README</li>
<li class="task-list-item"><input type="checkbox" disabled> Convert it to HTML</li>
</ul>

GFM 的任务列表语法 `- [x]` / `- [ ]` 会变成真正的禁用复选框输入框，与 GitHub 渲染清单的方式完全一致——这样复制来的 README 在你自己的页面上看起来也一样。

围栏代码块转高亮的 <pre><code>

```js
const html = md.render(src)
```
<pre><code class="language-js"><span class="hljs-keyword">const</span> html = md.render(src)
</code></pre>

在起始围栏后写上语言名，转换器就会应用语法高亮，把 token 包进 span，并在 <code> 元素上加上 language-js 类。配合一份高亮样式表，代码就会被着色。

README 转完整 HTML 文档

# My Project

A short description and a [link](https://example.com).
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>My Project</title></head>
<body>
<h1>My Project</h1>
<p>A short description and a <a href="https://example.com">link</a>.</p>
</body>
</html>

把输出切换为「完整文档」，转换器就会把渲染后的 HTML 包进一个带 <head> 和字符集的完整 页面——一个可在任意浏览器中打开或直接下载的独立 .html 文件。

如何将 Markdown 转换为 HTML

  1. 1

    键入或粘贴你的 Markdown

    把你的 Markdown——一份 README、发布说明、issue 正文——放进输入窗格。完整支持 GitHub Flavored Markdown：表格、任务列表、删除线、自动链接和围栏代码块。实时预览和 HTML 输出会随你输入而更新，全程在你的浏览器中。

  2. 2

    选择一种输出格式

    选择 HTML 片段以粘进模板或 CMS、完整文档以得到独立的 .html 页面，或邮件内联以获得能在 Outlook 中存活的内联样式 HTML。给代码围栏加上语言标签以启用语法高亮，并用「自定义 CSS」面板为预览设置样式。

  3. 3

    复制或下载

    点击「复制」获取 HTML，或点击「下载」将其保存为文件。要反向转换，切换到 HTML → Markdown 标签页并粘贴你的 HTML，即可得到干净的 Markdown。

常见误区

散文中未转义的 HTML 被吞掉

Markdown 会放行原始 HTML，所以你本想作为文本的尖括号——比如在写一个 <Component> 或泛型 List<T> 时——会被解析为 HTML 标签并从输出中消失。请用反斜杠或 HTML 实体转义尖括号，或把文本包进代码 span，使其按字面渲染。

✗ 错误 
Use the <Header> component to wrap pages.
<!-- <Header> is parsed as a tag and vanishes -->
✓ 正确 
Use the `<Header>` component to wrap pages.
<!-- backticks keep it literal: renders <Header> -->

表格管道符错位或格式错误

GFM 表格需要一个表头行、一个由短横线组成的分隔行，以及每行至少一个管道符。漏掉分隔行，或列数与表头不同，都会破坏表格——它会退化成一段管道符组成的普通段落。各单元格在视觉上无需对齐，但每行必须有相同的列数。

✗ 错误 
| Name | Role |
| Alice | Admin |
<!-- no |---|---| delimiter row: not a table -->
✓ 正确 
| Name | Role |
| ---- | ---- |
| Alice | Admin |
<!-- delimiter row present: renders a table -->

没有语言的代码围栏

一个没有语言信息串的围栏代码块会渲染为没有语言类的 <pre><code> 块，因此得不到语法高亮。代码仍会显示，只是单色。请在起始反引号后立即加上语言以启用高亮；反引号和名称之间的空格会禁用它。

✗ 错误 
```
const x = 1
```
<!-- no language → no highlighting -->
✓ 正确 
```js
const x = 1
```
<!-- language-js → highlighted -->

在需要完整文档处用了片段

把 HTML 片段输出直接复制并另存为 .html 文件，会产生一个没有 doctype、没有字符集、没有 <html>/<head>/<body> 的页面。浏览器往往仍能渲染它，但怪异模式和缺失的字符集会破坏带重音的字符与版式。当 HTML 必须独立存在时，请切换到完整文档格式。

✗ 错误 
<h1>Title</h1>
<p>Saved as page.html — no doctype, no charset.</p>
✓ 正确 
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><title>Title</title></head>
<body><h1>Title</h1><p>Complete, standalone page.</p></body></html>

常见使用场景

发布到静态站点或 CMS
用 Markdown 写内容，转换为 HTML 片段，粘进静态站点模板或 CMS 富文本字段。你会得到干净的语义标记——标题、列表、表格——而不被页面外壳碍事。
推送前预览 README
粘贴你的 README.md，看着实时预览以完整 GFM 渲染它——表格、任务列表、围栏代码——这样你能在提交前、而非在 GitHub 把它展示给全世界之后，就抓到坏掉的表格或缺失的代码围栏。
把笔记变成可分享的网页
用 Markdown 写的会议笔记、设计文档或草稿，一键就变成一个完整的 HTML 页面。选择「完整文档」，下载 .html 文件，你就拥有了可在任意浏览器中打开、可托管在任何地方的东西。
构建邮件安全的内联样式 HTML
邮件客户端会剥离 <style> 块，所以用 Markdown 写你的消息，再导出「邮件内联」格式——它把 CSS 搬到每个元素的 style 属性上。结果在 Outlook 等忽略文档级样式的客户端中也能正确渲染。
把 .md 文件转成可下载的 .html
需要一份 Markdown 文档的离线、自包含 HTML 版本？粘贴它，选「完整文档」，然后「下载」——你会得到一个带正确 doctype 和字符集的独立 .html 文件，无需构建工具或命令行。
在应用中嵌入渲染后的文档
正在用仓库里存储的 Markdown 生成文档、变更日志或帮助内容？用本工具看清给定的 Markdown 源会产出怎样的 HTML，从而对齐你应用的渲染器并为输出设置样式。

技术细节

CommonMark 与 GitHub Flavored Markdown
CommonMark 是严格、无歧义的 Markdown 规范，精确定义了标题、强调、列表、链接和代码块如何解析。GitHub Flavored Markdown（GFM）是一个严格超集：它保留 CommonMark 定义的一切，并增加四项扩展——管道表格、任务列表项（`- [x]`）、删除线（`~~text~~`）和自动链接的裸 URL。因为 GFM 只是增加功能，任何有效的 CommonMark 文档也都是有效的 GFM。本转换器实现 GFM 超集，所以为任一种语法编写的文档都能正确渲染。
防 XSS 的沙箱渲染
Markdown 有意允许嵌入原始 HTML，这意味着一份 Markdown 文档可能含有 <script> 标签或像 onerror 这样的事件处理器。实时预览通过在禁用脚本的 <iframe sandbox=""> 内渲染来防范此类情况，因此你输入中的活动内容在你预览时无法执行——这在你转换来自不受信任来源的 Markdown 时很重要。工具输出的序列化 HTML 是对你输入的忠实渲染；如果你打算发布从不受信任的 Markdown 派生出的 HTML，请先在服务器端用 DOMPurify 之类的消毒器处理它，再提供给他人。
邮件 HTML 兼容性
HTML 邮件由一批 CSS 支持出了名地有限的引擎渲染。Windows 上的 Outlook 使用 Word 的渲染引擎，会忽略文档头部的 <style> 块，因此任何基于类的样式都会悄无声息地消失；可靠的做法是在每个元素上用内联 style 属性，这正是「邮件内联」输出所产生的。图片是另一个陷阱：许多客户端在收件人选择前会拦截远程图片，所以把小图片作为 data URI 嵌入能让它们立即渲染，而大型远程图片可能根本不显示。请让标记保持简单，并在你的目标客户端间测试。
浏览器内同步高亮
当一个围栏代码块带有语言信息串（```js）时，转换器会对其内容运行一个同步高亮器，对源码进行分词，并把每个 token 包进一个带 hljs-keyword 或 hljs-string 之类类名的 <span>，同时在 <code> 元素上加一个 language-js 类。高亮只是结构性的——它添加的是类，不是颜色——所以目标页面需要一份匹配的高亮样式表来渲染色板。因为它在浏览器中同步运行，高亮后的 HTML 在你输入的瞬间就会出现，没有网络调用。

最佳实践

为目标场景选择输出格式
让格式匹配 HTML 的去处。CMS 字段或模板已有页面外壳，所以粘贴 HTML 片段。一个你想在浏览器中直接打开的文件需要带 doctype 和字符集的完整文档。邮件需要邮件内联，让样式在剥离 <style> 块的客户端中存活。粘贴错误的形态是最常见、本可避免的失误。
始终给代码围栏标注语言
在起始反引号后立即写上语言——```js、```python、```sql——中间不留空格，让转换器能高亮该块并加上正确的语言类。裸围栏会产生无样式、无高亮的代码。请使用高亮器能识别的语言；未知或拼错的名称会回退为纯文本。
发布不受信任的 Markdown 前先消毒
预览有沙箱，但工具输出的 HTML 是忠实渲染——包括输入中任何原始 HTML 或 <script>。如果那份 Markdown 来自用户或其他不受信任的来源，且你打算把结果提供给他人，请先在服务器端用 DOMPurify 之类的消毒器处理 HTML。沙箱在转换时保护你，而不是在你发布后保护你的访客。
邮件 HTML 保持简单并内联
对于邮件，优先用「邮件内联」格式，让版式保持简单，并避免 Outlook 等客户端会丢弃的 CSS 特性。把小图片作为 data URI 内联，使它们即便在远程图片被拦截时也能渲染，并且在大范围发送前务必先给自己发一封测试——邮件渲染是 HTML 所面对的最不宽容的目标。
在文本中转义字面 HTML 字符
如果你想让字面的 < 或 & 作为文本出现，而不是被解释为标签或实体，请用反斜杠（\<）或 HTML 实体（<）转义它。Markdown 会原样放行原始 HTML，所以散文中未转义的 <example> 可能被当作未知标签吞掉，从渲染输出中消失。

常见问题

它支持 GitHub Flavored Markdown（GFM）吗？
支持。转换器在 CommonMark 之上渲染完整的 GitHub Flavored Markdown 超集：管道表格、任务列表（`- [x]` / `- [ ]`）、用 `~~text~~` 的删除线、自动链接的 URL，以及带语言信息串的围栏代码块。也就是说，为 GitHub 编写的 README、issue 正文或 wiki 页面在这里的渲染方式与 GitHub 完全相同，所以你的 README 预览 在推送前就能反映真实效果。纯 CommonMark 文档同样适用——GFM 只增加功能，绝不删减。
如何获得邮件安全的内联样式 HTML？
选择「邮件内联」输出标签页。大多数邮件客户端——尤其是 Outlook——会剥离或忽略文档头部的 <style> 块，因此你放在那里的 CSS 会被丢弃，版式随之崩塌。「邮件内联」格式通过把样式直接搬到每个元素的 style 属性上（例如 <h1 style="font-size:2em;margin:0 0 16px">）来解决这个问题，而客户端会尊重这种写法。把结果直接粘进你的邮件模板或 ESP 即可。请让图片保持小巧，并优先使用 data URI 或绝对 https 链接，因为许多客户端默认拦截远程图片。
HTML 片段和完整文档有什么区别？
HTML 片段只是渲染后的正文标记——<h1>、<p>、<ul>、<table> 等等——不带外围页面。当你要粘进一个已经有自己 <html>、<head> 和 <body> 的地方时使用它，比如 CMS 富文本字段、静态站点模板或 React 组件。完整文档则把同样的标记包进一个带 <head>、字符集声明和 <title> 的完整 页面，因此它能独立存在——在浏览器中打开，或另存为 .html 文件。选错是常见的错误：把片段丢进浏览器标签页也能渲染，但缺少 doctype 或字符集可能导致表现异常。
渲染出的 HTML 预览是否能防 XSS？
实时预览在一个禁用脚本的沙箱 <iframe> 内渲染，因此即使你的 Markdown 含有原始 <script> 标签或 onerror 处理器，预览期间也不会执行任何东西。这一点很重要，因为 Markdown 在设计上允许嵌入 HTML，而转换不受信任的 Markdown 否则可能注入活动内容。沙箱保护的是你——做转换的这个人。请注意，工具输出的 HTML 字符串是对你输入的忠实渲染——如果该输入来自不受信任的来源，且你打算发布结果，请先在服务器端对其消毒（例如用 DOMPurify），再提供给其他用户。
我可以给预览添加自己的 CSS 吗？
可以。打开「自定义 CSS」面板，输入任何你想要的规则——例如 h1 { color: #0969da; } 或 table { border-collapse: collapse; }。样式会被注入到沙箱预览 iframe 中，让你立刻看到 Markdown 以你自己的外观渲染的样子，这对于匹配某个站点的排版，或检查 README 在 GitHub 风格 CSS 下的呈现都很方便。自定义 CSS 只影响实时预览；除非你选择「邮件内联」格式，否则你从输出标签页复制的 HTML 仍是无样式的片段或文档标记。
我的文件或文本会被上传到服务器吗？
不会。转换完全用 JavaScript 在你的浏览器中进行——你的 Markdown 在本地被解析并序列化为 HTML，绝不会被传输、存储或记录。你可以打开浏览器的「网络」标签页验证：转换文本会触发零次网络请求。这让该工具可安全用于未发布的文档、内部 README、处于禁运期的发布说明，以及任何你尚未准备好分享的内容。这里没有上传步骤，也没有文件大小上限，只受限于你的浏览器能舒适容纳在内存中的量。
它能离线工作吗？
页面加载完成后，能——Markdown 解析器、语法高亮器和 HTML 序列化器都在浏览器中运行，没有任何服务器往返，因此你可以在断网状态下转换。这是隐私优先设计的直接结果：既然没有任何东西被发往别处，工具在初次加载后也就不需要网络做任何事。这在飞机上、严格防火墙之后，或任何你单纯不想让文档离开机器的时候都很方便。
如何把 Markdown（.md）文件转换成 HTML 文件？
把 Markdown 粘贴或打开到输入窗格，选择「完整文档」输出让结果成为一个独立页面，然后点击「下载」，把它保存为可在任意浏览器中打开的 .html 文件。如果你只需要正文标记以放进现有模板，则改选「HTML 片段」并复制它。没有单独的上传步骤——粘贴你 .md 文件的内容（或在支持处拖入它），转换后的 HTML 就会即刻就绪，完全在你的浏览器中完成。
为什么我的代码块没有高亮？
只有当你告诉转换器一个围栏代码块用的是哪种语言时，语法高亮才会生效。请把语言作为信息串紧接在起始的三个反引号之后——```js、```python、```sql——中间不留空格。裸 ``` 围栏会产生一个没有语言类、因而没有颜色的 <pre><code> 块。拼错或不受支持的语言名（```javscript）也会被当作纯文本处理。还要记住，高亮会添加像 hljs-keyword 这样的 <span> 类；颜色要真正显示，目标页面上需要一份匹配的高亮样式表。
我能把 HTML 转回 Markdown 吗？
可以。切换到 HTML → Markdown 标签页，或打开专门的 HTML 转 Markdown 转换器，粘贴你的 HTML，即可得到干净的 Markdown——并提供 ATX 与 Setext 标题、内联与引用链接的选项。两个方向互补：用 Markdown → HTML 来发布或预览，用 HTML → Markdown 把现有网页内容带入基于 Markdown 的工作流，比如静态站点或文档仓库。要先把 HTML 整理一下，我们的 HTML 格式化工具 可以把它美化排版。

相关工具

查看所有工具 →

Base64 解码与编码工具

编码和格式化

免费在线 Base64 解码编码工具。实时转换，支持中文和 Emoji，100% 浏览器端运行，数据不离开设备，无需注册。

Base64 转图片转换工具

编码和格式化

在浏览器中把 Base64 字符串或 data URI 解码还原为图片。预览、读取尺寸与 MIME，再下载为 PNG、JPG、GIF、SVG。无需上传。

CSV 转 JSON 转换器

编码和格式化

在浏览器中将 CSV 转换为 JSON。支持 RFC 4180、类型推断、表头行、大整数安全。100% 隐私，无需上传。

HTML 转 Markdown 转换器

编码和格式化

在浏览器中将 HTML 转换为干净的 Markdown——支持 GFM 表格、任务列表和链接。可选 ATX/Setext 标题及内联或引用链接。非常适合迁移网页内容或喂给 LLM。100% 私密，无需上传。

图片转 Base64 转换工具

编码和格式化

在浏览器中将图片转换为 Base64 data URI——支持 PNG、JPG、GIF、WebP、SVG、ICO。一键复制 HTML、CSS、Markdown 和 JSON 输出。100% 私密，无需上传。

JSON Diff 对比

编码和格式化

在浏览器中即时对比两份 JSON。Side-by-Side 高亮 + RFC 6902 JSON Patch 输出，一键忽略 timestamps、IDs 等噪音字段。100% 隐私保护，零上传。