md2wechat

English | 中文

What is this

A single-file, zero-dependency Node.js script that converts Markdown into HTML that survives pasting into the WeChat Official Account editor (mp.weixin.qq.com) with all formatting intact.

If you've ever pasted Markdown-rendered HTML into WeChat's editor and watched it flatten into plain text, you know the problem: WeChat strips <style> tags, external CSS, and most class-based styling on paste. The only formatting that survives is inline styles — and writing them by hand is miserable.

md2wechat.js does that inlining for you, plus works around several WeChat mobile rendering bugs.

Quick start

node md2wechat.js article.md          # → article.wechat.html
node md2wechat.js article.md out.html # custom output path

Then: open the HTML in a browser → Ctrl+A → Ctrl+C → paste into the WeChat editor. Done.

No install, no build step, no dependencies. Any Node.js version from the last decade works.

Markdown support

Syntax	Renders as
# ## ###	Styled headings (h2 gets the accent color)
**bold**	Accent-colored bold
*italic*, `code`	Standard
[text](url)	Styled links
	Full-width rounded images
> quote	Accent-bordered quote block
- item / 1. item	Bug-safe list paragraphs (see below)
---	Dashed divider

Extras:

[CTA:Open 5iTool →](https://5itool.com)

[TIP]This renders as a highlighted tip box.

Marker	Renders as
[CTA:text](url)	Full-width call-to-action button
[TIP]text	Warm-yellow tip box

WeChat quirks this handles

1. <style> tags are stripped on paste → all styles inlined per element
2. <div> loses its styling → only <p> / <section> / semantic tags used
3. Ordered lists lose their numbers on mobile → lists become paragraphs with styled number badges / bullets
4. Images float awkwardly → forced display:block; width:100%
5. Readability tuning → 15px / 1.75 line-height / 1em paragraph spacing (the community-validated sweet spot)

Tips

• Keep paragraphs short (3 mobile lines max) — WeChat readers skim.
• The max-width:677px on the wrapper matches WeChat's desktop content column, so the paste preview looks like the final article.
• Customize colors by editing the S style presets at the top of the file — one place, everything follows.

Real-world use

This converter powers the publishing pipeline of 5iTool (a WeChat mini-program toolbox), where it converts every article before it goes to the draft box.

这是什么

单文件、零依赖的 Node.js 脚本：把 Markdown 转成粘贴进微信公众号编辑器（mp.weixin.qq.com）后格式不丢的 HTML。

只要你往公众号后台粘过 Markdown 渲染出来的 HTML，就知道坑：微信编辑器会剥掉 <style> 标签、外部 CSS 和几乎所有 class 样式，唯一能活下来的是内联样式——手写内联样式是自虐。这个脚本帮你自动内联，还顺手绕开了几个微信手机端渲染 bug。

快速上手

node md2wechat.js article.md          # → article.wechat.html
node md2wechat.js article.md out.html # 自定义输出路径

然后：浏览器打开 HTML → 全选复制 → 粘贴进公众号编辑器。完事。

零安装、零构建、零依赖，任何能跑的 Node.js 都行。

支持的语法

写法	效果
# ## ###	标题（h2 带品牌色）
**粗体**	品牌色加粗
*斜体*、`代码`	标准样式
[文字](链接)	带下划线的链接
	全宽圆角图片
> 引用	品牌色左边框引用块
- 条目 / 1. 条目	防丢序号的列表段落（见下）
---	虚线分割线

扩展语法：

[CTA:打开 5iTool →](https://5itool.com)

[TIP]这会渲染成一个高亮提示块。

标记	效果
[CTA:文字](链接)	全宽行动按钮
[TIP]文字	暖黄提示框

处理了哪些微信的坑

1. 粘贴时 <style> 被剥 → 全部样式逐元素内联
2. <div> 样式会丢 → 只用 <p> / <section> / 语义标签
3. 有序列表在手机端序号丢失 → 列表转段落 + 数字徽章 / 项目符号
4. 图片浮动错乱 → 强制 display:block; width:100%
5. 阅读体验参数 → 15px 字号 / 1.75 行高 / 1em 段距（社区验证过的黄金组合）

小技巧

• 段落写短点（手机 3 行以内），公众号读者是扫读的。
• 外层 max-width:677px 对齐微信桌面端正文栏宽，粘贴预览即最终效果。
• 想换主题色：改文件顶部 S 样式常量，一处改全局生效。

实际使用

本转换器驱动 5iTool（微信小程序工具箱）的公众号发文流水线，每篇文章进草稿箱前都由它转换。

License

MIT