文本工具

Markdown 转公众号排版与 HTML

用 Markdown 写好的文章,直接粘贴到公众号编辑器里会变成一堆井号和星号。把它贴到左边,右边就是排好版的样子:标题、加粗、引用、代码块、表格都带上样式,点「复制到公众号」再粘贴进编辑器即可。需要网页代码时切到 HTML,得到不带样式的干净标签。

公众号预览

「复制到公众号」复制的是带样式的富文本,粘贴到公众号编辑器、飞书文档或 Word 都能保留格式。内容只在你的浏览器里处理,不会上传。

全部在你的浏览器里运行,这里输入的内容不会上传。

怎么用

  1. 把 Markdown 粘贴到左边,或者点「载入示例」看看效果。右边实时显示公众号里的样子。
  2. 选主题色和正文字号。主题色用在标题、加粗和链接编号上,默认字号 16px。
  3. 点「复制到公众号」,打开公众号后台的文章编辑器,在正文里粘贴。
  4. 想要网页代码时切到「HTML」,复制 HTML 片段,或者下载一个可以直接用浏览器打开的 .html 文件。

转换时做了什么

样式写在每个元素上

公众号编辑器里没有地方放样式表,所以工具把每个标题、段落、引用、表格单元格的样式都写进它自己的 style 属性,整篇文章包在一个统一字号、行高的容器里。复制时放进剪贴板的是富文本,粘贴后格式跟着过去。粘贴后请以公众号编辑器里的预览为准,个别样式可能被编辑器调整。

外链转成文末参考链接

按腾讯客服的说明,只有已开通微信支付的服务号能在文章里插入跳转外部网址的超链接;所有公众号都可以链接本账号或其他账号已群发的文章。所以工具默认把外部链接换成「文字[1]」,在文末列出「参考链接」,读者至少能看到并复制网址。指向 mp.weixin.qq.com 的公众号文章链接保留为可以点击的链接。如果你的账号能插外链,把「外部链接」改成「保留为链接」即可。

代码块保住缩进

代码块里的空格换成不间断空格,换行换成换行标签,Tab 换成 4 个空格,粘贴后缩进不会被合并掉;代码块本身可以左右滑动,长行不会被折断。

Markdown 语法

解析用开源的 marked,支持 CommonMark 和 GitHub 风格 Markdown 的表格、删除线、任务列表和自动识别网址。任务列表的复选框在公众号里换成 ☑ 和 ☐ 两个字符。

安全

Markdown 里夹带的 HTML 标签按文字原样显示,javascript: 之类的链接会被去掉,所以粘贴来路不明的稿子也不会在页面里执行脚本。需要在 HTML 输出里保留自定义标签时,请在得到的代码里手动加上。

示例

这段 Markdown:

## 小结

详见[官方文档](https://example.com/docs)。

切到 HTML 得到:

<h2>小结</h2>
<p>详见<a href="https://example.com/docs">官方文档</a>。</p>

在公众号模式下,正文变成「详见官方文档[1]。」,文末多出一行「[1] 官方文档:https://example.com/docs」;二级标题左侧带一条主题色竖线。

局限

  • 图片要用网络地址。电脑上的本地路径在浏览器里打不开,这类图片需要在公众号编辑器里重新上传。
  • 代码块没有语法高亮,统一用深灰色等宽字体。
  • 不支持数学公式和脚注语法([^1]),它们会按普通文字显示。
  • 公众号编辑器可能会调整部分样式,发表前请用编辑器的预览再看一遍。

常见问题

粘贴到公众号后格式乱了怎么办?

确认点的是「复制到公众号」而不是「复制 HTML」:前者复制的是带样式的富文本,后者是代码文本,粘贴后会显示成一堆标签。

为什么链接变成了文末的编号?

只有开通了微信支付的服务号才能在正文插外部链接,其他账号插了也点不开。编号加文末网址让读者至少能看到地址;如果你的账号可以插外链,选「保留为链接」。

能转成 Word 吗?

可以间接做到:点「复制到公众号」,再粘贴到 Word 或 WPS 里,标题、加粗、表格等格式会保留下来。

HTML 输出能直接放进网页吗?

可以。HTML 片段只有语义标签、不带样式,会继承你网页的样式;下载的 .html 文件带一份简单的阅读样式,可以直接用浏览器打开。

我的文章会上传吗?

不会。转换在你的浏览器里完成,页面不保存你输入的内容。

参考资料

↵ 打开 · Esc 关闭