字
字节笔记本
2026年2月23日
wechat-format：开源微信公众号排版编辑器
本文介绍 wechat-format，一个开源的微信公众号排版编辑器，可以将 Markdown 格式转换为微信特制的 HTML，解决微信公众号编辑器排版难题。
项目简介
wechat-format 是由 Lyric 开发的开源工具，旨在解决微信公众号排版编辑器的诸多限制。该项目在 GitHub 上已获得 4.5k+ stars 和 600+ forks，是微信排版领域的热门开源项目。
在线体验：https://lab.lyric.im/wxformat
核心特性
- Markdown 转微信 HTML：一键将 Markdown 内容转换为微信公众号兼容的 HTML 格式
- 解决样式重置问题：自动处理
ul和ol列表样式在微信编辑器中被重置的问题 - 链接自动转换：自动将文章中的链接转换为参考文献索引，并附在文字末尾
- 美观的排版：提供精心设计的默认主题样式
- 开源免费：完全开源，可自由定制和扩展
默认主题配置解析
wechat-format 的默认主题定义了完整的样式系统，包括块级元素和行内元素的样式：
基础样式 (BASE)
javascript
BASE: {
'text-align': 'left',
'color': '#3f3f3f',
'line-height': '1.5'
}块级元素样式 (block)
| 元素 | 样式特点 |
|---|---|
| h2 | 居中显示，140% 字号，上下边距 80px/40px |
| h3 | 粗体，120% 字号，上下边距 40px/20px |
| p | 行高 1.6，10px 边距 |
| blockquote | 灰色左边框，浅灰背景，引用样式 |
| code | 等宽字体，浅灰背景，圆角边框 |
| image | 圆角，块级显示，宽度 100% |
| ol/ul | 自定义列表缩进和样式 |
行内元素样式 (inline)
| 元素 | 样式特点 |
|---|---|
| codespan | 橙色文字 (#ff3502)，浅黄背景，圆角 |
| link | 橙色链接文字 |
| strong | 橙色强调文字 |
| table | 边框合并，表头灰色背景 |
| footnote | 12px 小字体脚注 |
使用方法
在线使用
- 访问 https://lab.lyric.im/wxformat
- 在左侧编辑器中输入 Markdown 内容
- 右侧实时预览转换后的效果
- 点击复制按钮，粘贴到微信公众号编辑器
本地部署
bash
# 克隆项目
git clone https://github.com/lyricat/wechat-format.git
# 进入项目目录
cd wechat-format
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build主题定制
wechat-format 支持自定义主题样式。主题文件位于 src/assets/scripts/themes/ 目录：
javascript
// 主题结构示例
var customTheme = {
BASE: { /* 基础样式 */ },
BASE_BLOCK: { /* 块级基础 */ },
block: { /* 块级元素 */ },
inline: { /* 行内元素 */ }
}你可以：
- 修改颜色方案
- 调整字体大小
- 自定义边距间距
- 添加新的样式规则
技术栈
- Vue.js：前端框架
- Element UI：组件库
- marked.js：Markdown 解析
- CodeMirror：代码编辑器
适用场景
- 技术博客作者发布微信公众号文章
- 需要精美排版的公众号运营者
- 习惯使用 Markdown 写作的内容创作者
- 对微信默认编辑器不满意的用户
项目链接
- GitHub 仓库：https://github.com/lyricat/wechat-format
- 在线使用：https://lab.lyric.im/wxformat
- 作者博客：https://lyric.im
- 微信公众号：iamlyricw
总结
wechat-format 是一个简洁实用的开源工具，完美解决了微信公众号排版的痛点。如果你是微信公众号的内容创作者，习惯使用 Markdown 写作，这个工具将大大提升你的排版效率和文章美观度。
分享: