Markdown 预览与转换 - 在线渲染、转 HTML、HTML 转 MD

左边写 Markdown 右边实时渲染,支持表格、代码块与原始 HTML 且渲染前消毒,还能一键转成完整 HTML 或把 HTML 转回 Markdown

Markdown 预览与转换 - 在线渲染、转 HTML、HTML 转 MD是什么

Markdown 写起来舒服,但发到不同平台常出问题:有的不支持表格、有的把单个换行当空格。这个工具左边写右边实时渲染,能先看清效果再发出去;也能一键转成自带样式的完整 HTML 文件,或者反过来把一段 HTML 转回 Markdown——从网页复制内容时特别有用。

所有计算都在你的浏览器本地完成,输入的内容不会上传到服务器。

怎么用Markdown 预览与转换 - 在线渲染、转 HTML、HTML 转 MD

  1. 实时预览:左边写 Markdown,右边立刻渲染。顶部的「识别到语法」会列出这段用到了哪些格式,用来确认表格、代码块有没有被正确识别
  2. 渲染前会过一遍安全过滤,脚本与内联事件会被移除。如果提示「部分内容被安全过滤移除」,说明你写的某个标签被拦了
  3. 要发给别人时点「下载 HTML」,得到一个自带排版样式的独立文件,双击就能在浏览器打开,不依赖任何外部资源
  4. HTML 转 MD:切到第三个页签,粘贴一段 HTML,右边会输出等价的 Markdown,标题用井号风格而不是下划线

示例

输入

# 标题(井号加空格)紧接着空行再接 - 列表项,然后空行接三行表格

输出

<h1>标题</h1><ul><li>列表项</li></ul><table>...

预览页可直接看到渲染效果

常见问题

为什么我写的 HTML 标签直接显示成文字了?

可能是你关掉了「允许原始 HTML」。这个开关默认打开,关掉后所有标签都会被转义成文字显示。关掉更安全,但 details、summary 这类折叠块就用不了。

预览里的样式和我发布后的效果不一样?

预览用的是本站的一套基础排版样式,只保证结构正确、可读。发布到公众号、博客或自己的站点后,样式由目标平台的 CSS 决定,字体、行距、表格边框都会变。

HTML 转 Markdown 会丢东西吗?

会。Markdown 能表达的格式比 HTML 少得多,内联样式、复杂的嵌套表格、自定义属性都会丢失或简化。转换后建议对一遍关键位置,尤其是表格与代码块。

小提示

  • 「单个换行即换行」这个开关在不同平台默认值不一样:微信、聊天软件通常是换行即换行,而标准 Markdown 会把单个换行当空格。发之前先对一下目标平台的习惯
  • 表格必须三行起步:表头、分隔行(由减号组成)、数据行。少了分隔行就不会渲染成表格,这是最常见的手误
  • 代码块用三个反引号包起来,后面可以跟语言名做高亮。缩进四个空格也能表示代码块,但和列表嵌套混在一起时容易失效,推荐用反引号
  • 转出来的 HTML 是片段加一份内置样式,不是完整的网站模板。要做成正式页面,把 body 里的内容搬到你自己的布局里即可

同类Markdown工具