About
当前语言: 中文 切换为英文

Markdown 转 HTML

在左侧粘贴 Markdown,右侧即时查看渲染后的 HTML(或其源代码)。完全在浏览器中运行。

  1. 在左侧输入或粘贴 Markdown。
  2. 右侧预览会随你输入实时更新。
  3. 将「视图」切换为「HTML 源码」,即可看到标签而非渲染后的输出。
  4. 点击「复制 HTML」将源码放入剪贴板,或「下载 .html」保存为独立文件。
它能做什么?

本工具使用 CommonMark 加 GitHub Flavored Markdown(GFM)将 Markdown 转为 HTML,段内换行会渲染为 <br>。你可以查看渲染后的预览,或切换到 HTML 源码视图查看生成的标签。输出可粘贴到博客平台、邮件编辑器或任何接受 HTML 的地方。

示例

输入的 Markdown:

# Release notes

We shipped **three** things this week:

- [x] Faster cold start
- [ ] Dark mode (next week)

See the [docs](https://example.com/docs) for details.

```js
console.log("hello");
```

渲染后的 HTML 源码:

<h1>Release notes</h1>
<p>We shipped <strong>three</strong> things this week:</p>
<ul>
<li><input type="checkbox" checked disabled> Faster cold start</li>
<li><input type="checkbox" disabled> Dark mode (next week)</li>
</ul>
<p>See the <a href="https://example.com/docs">docs</a> for details.</p>
<pre><code class="language-js">console.log("hello");
</code></pre>

常见错误与注意事项

大多数 Markdown 渲染意外都来自少数几种语法陷阱。如果预览看起来不对,通常是下列之一。

  • 列表前缺少空行。 「介绍文字\n- 项目」会被渲染为一个段落。请在介绍和第一个列表项之间留出空行。
  • 原本想写段落,却变成了缩进代码块。 行首的 4 个空格会把该行变成代码块。去掉缩进,或显式使用 ``` 代码围栏。
  • 表格损坏。 每个 GFM 表格都需要分隔行(| --- | --- |),每列至少三个连字符,并且每一行的竖线数量相同。
  • URL 中含空格的链接。 [点击](my page.html) 会让解析器出错。将空格 URL 编码为 %20,或用尖括号:<my page.html>。
  • 单词内部的星号。 wild*card 是否被渲染为强调,取决于上下文。用反斜杠转义:wild\*card。
  • 代码块中的 HTML 转义。 粘贴含有 &lt; 的片段会按字面显示,因为它们已经被转义。请粘贴未转义的原始源码。
常见问题

这里支持哪种 Markdown 方言?

CommonMark 加 GitHub Flavored Markdown(GFM),涵盖表格、围栏代码块、任务列表、删除线以及自动链接的 URL。段内换行会变成 <br> 标签 —— 因为启用了 breaks 选项,这与 GitHub 评论和大多数聊天应用的渲染方式一致。

我的 Markdown 中的 HTML 会被净化吗?

不会。渲染预览默认原样放行 HTML,这样可以让嵌入的 <details> 或 <kbd> 继续可用。不要将不可信的 Markdown 复制输出到公开站点,除非先经过 DOMPurify 之类的净化器。

支持脚注、数学公式或图表吗?

不支持。这里只处理原生 GFM。脚注、数学(KaTeX/MathJax)以及 Mermaid 图表属于 GitHub 或平台扩展,此处不渲染。如有需要,请使用配置了相应插件的 Markdown 渲染器,或把结果粘贴到支持它们的平台。

点击「复制 HTML」时发生了什么?

工具通过 Clipboard API 将渲染后的 HTML 源码写入你的剪贴板,不会带上页面外壳 —— 只包含对应 Markdown 的标签。你可以粘贴到 CMS、邮件编辑器或直接写入文件。磁盘上不会生成文件。

为什么我的表格看起来错位?

GFM 表格需要表头行、每列至少三个连字符的分隔行,以及单元格之间的竖线。缺少竖线或分隔行只有两个连字符都会静默失败。切换到 HTML 源码视图,看看是否真的生成了 <table>。

你们会保存我在这里粘贴的 Markdown 吗?

不会。我们既不保存你输入或粘贴的 Markdown,也不保留你下载的 HTML。关闭或刷新标签页的那一刻一切都会清空 —— 没有日志,我们这边也没有关于你内容的任何记录。你可以在浏览器开发者工具里自行检查。