PixConvert

免费 Markdown 转 HTML 转换器

免费将 Markdown 转换为 HTML,边输入边查看结果。粘贴你的文本,在实时预览中查看表格和任务列表,然后一键复制 HTML 源码。

Markdown 输入

HTML 输出将显示在这里…

如何将 Markdown 转换为 HTML

1

粘贴你的 Markdown。

在左侧的 Markdown 输入框中输入或粘贴,也可以点击加载示例,查看包含表格和代码块的样例。

2

检查预览。

预览标签页会在每次修改后重新渲染。如果文本中的单个换行需要保留为换行,请开启 GitHub 风格换行。

3

复制 HTML。

打开 HTML 源码标签页查看标记,然后点击复制 HTML,并粘贴到你的 CMS、邮件工具或静态网站中。

常见问题

关于 Markdown 风格、表格、换行以及输出 HTML 的解答。

如何将 Markdown 转换为 HTML?

把 Markdown 粘贴到左侧输入框,预览会在你输入时显示结果。打开 HTML 源码标签页查看标记,然后点击复制 HTML,即可把完整的 HTML 放入剪贴板。

支持哪种 Markdown 风格?

它使用 marked 解析器并启用 GitHub Flavored Markdown,涵盖 CommonMark 以及表格、任务列表、双波浪线删除线和 www.example.com 这类裸链接。脚注、数学公式、emoji 短代码和 YAML front matter 不会被转换。

支持转换表格吗?

支持。带有表头分隔行的竖线表格会变成 HTML 的 table、thead 和 tbody 元素。对齐冒号同样有效::-: 表示列居中,--: 表示右对齐,会写成每个单元格上的 align 属性。

输出的 HTML 可以安全嵌入吗?

只有当你的 Markdown 本身是安全的才行。转换器不会做清理,因此原始 HTML、script 标签、onerror 属性和 javascript: 链接都会原样进入复制出的 HTML。预览会阻止脚本,但同样的代码会在你的网站上运行,所以发布前请用 DOMPurify 之类的工具清理复制出的 HTML。

GitHub 风格换行选项有什么作用?

它会把每个单独的换行转换为 HTML 换行。关闭时,中间只隔一个换行符的两行会合并成一个段落,与标准 Markdown 一致。无论是否开启,空行都会开始一个新段落。

为什么我的代码块显示为纯文本?

围栏代码需要在单独的行上使用三个反引号或三个波浪线,或者缩进 4 个空格。围栏后的语言标识(如 js)会变成 language-js class,但预览不会添加语法颜色。请在你自己的页面中添加代码高亮工具。

输出内容包含 html、head 和 body 标签吗?

不包含。你得到的是 HTML 片段:只有内容对应的元素,没有 doctype、head 或 body。这适合放进 CMS 区块或模板插槽。如果需要独立页面,请把片段包进你自己的 HTML 文档。

可以把 HTML 转回 Markdown 吗?

这个页面不行,它只支持 Markdown 转 HTML。如果想查看 HTML 或 Markdown 两个版本之间有哪些变化,可以把两段内容都粘贴到差异对比工具(Diff Checker)中,它会逐行进行比较。

为什么我的 front matter 显示成了标题?

转换器不会解析 YAML front matter。开头的 --- 会变成水平分隔线,结尾 --- 之前的键值行则会合并成一个标题。粘贴之前请先删除 front matter 区块,并在你的 CMS 中设置标题。

可以上传 .md 文件吗?

不可以,这里没有文件选择器。请用文本编辑器打开 .md 文件,复制全部内容后粘贴到输入框中。在同一解析器的 Node 测试中,8 KB 的文件耗时不到一毫秒,0.9 MB 的文件约 0.1 秒。

我的 Markdown 会被发送到服务器吗?

不会。文本在你的浏览器中完成转换,并保留在你的设备上。在线网站上,Google Analytics 只会记录你点击复制 HTML 或清空的动作,不包含内容。你的 Markdown 中链接的图片会从各自的地址加载。

Markdown 转 HTML 转换器功能

基于 marked 解析器构建,并启用 GitHub Flavored Markdown。在左侧输入,在右侧查看预览或 HTML 源码。

Markdown 转 HTML 编辑器,左侧为 Markdown,右侧实时预览标题、任务列表、表格和代码

边输入边预览 Markdown 转换的 HTML

每次修改后预览都会重新渲染,标题、列表、链接、引用和代码都带有便于阅读的样式。GitHub 表格、任务列表复选框和删除线也能正常渲染。

  • 每次按键即时更新
  • 支持表格、任务列表和删除线
  • 浅色和深色预览样式
立即试用
Markdown 转 HTML 源码视图,显示 HTML 片段,从 <h1>v2.4.0</h1> 到带有 language-js 类的代码块

一键复制 HTML 源码

切换到 HTML 源码标签页即可查看原始标记。点击复制 HTML 会把完整片段放入剪贴板,可直接粘贴到 CMS、邮件模板或静态页面中。

  • HTML 片段,不含 head 或 body
  • 代码块保留语言 class
  • 只读源码视图,方便检查标记
立即试用

GitHub 风格换行

默认关闭,因此只用一个换行符分隔的行会合并成一个段落,与标准 Markdown 一致。开启后,每个单独的换行符都会变成换行,就像 GitHub 评论一样。

原始 HTML 原样保留

Markdown 中的 HTML,例如 div 或 iframe,会按原样保留在输出中。预览会阻止脚本,但复制出的 HTML 不会被清理,所以发布前请先检查。

加载示例快速开始

点击一下,编辑器就会填入一段示例,包含标题、粗体和斜体文字、列表、JavaScript 代码块、表格、引用和链接,让你看到每种元素的效果。

你的 Markdown 保留在你的设备上

转换在你的浏览器中运行,你的文本不会被发送。使用统计只会记录你复制或清空的动作。Markdown 中的图片会在预览中从各自的网络地址加载。

Markdown 转换的使用场景

复制出的 HTML 有三种常见用途。

博客与 CMS 发布

用 Markdown 写文章,然后把 HTML 粘贴到任何支持原始 HTML 的编辑器中,例如 CMS 里的代码块或 HTML 视图。

  • 把 HTML 粘贴到 CMS 代码块中
  • 保留草稿中的标题、链接和列表
  • 发布文章前先检查预览

邮件模板

用 Markdown 起草新闻通讯或较长的回复,然后把 HTML 复制到支持自定义 HTML 的邮件工具中。邮件应用会添加自己的样式,所以请先发送测试邮件。

  • 先用纯 Markdown 写好邮件
  • 把 HTML 复制到自定义 HTML 区块
  • 正式发送前先给自己发一封测试邮件

文档

把 README 或帮助文章转换成 HTML,用于文档页面或应用内帮助面板。围栏代码块会保留语言 class,你可以用它来挂接代码高亮工具。

  • 推送前预览 README
  • 将文档页面导出为 HTML 片段
  • 为代码块添加你自己的语法高亮工具