WeChat Styler - 公众号排版工具

将 Markdown 文章转换为优雅的公众号 HTML 格式，支持多主题切换。

使用方式

# 基础用法（使用默认主题）
/wechat-styler path/to/article.md

# 指定主题
/wechat-styler path/to/article.md --theme kami
/wechat-styler path/to/article.md --theme magazine-ink

# 批量转换（支持 glob 模式）
/wechat-styler "articles/*.md" --theme kami
/wechat-styler "01_项目/内容创作/**/*.md" --theme magazine-ink

# 自定义参数
/wechat-styler path/to/article.md --theme kami --font-size 17 --accent-color "#1B365D"

# 输出到指定路径（单文件）
/wechat-styler path/to/article.md --output path/to/output.html

可用主题

1. kami（紙感编辑排版）- 默认主题

特点：

• warm parchment 纸感背景：#f5f4ed
• ink-blue 单一强调色：#1B365D
• 中文标题使用衬线/楷体栈，正文使用稳定无衬线栈
• 温暖灰阶，不使用冷灰和纯白大底
• 标题左侧蓝色竖线、solid tag 背景、克制引用块
• 所有背景色使用 solid hex，并在外层、内容层、文本层重复声明，降低粘贴到公众号后背景丢失风险

适用场景： 公众号深度文章、商业分析、课程内容、正式说明文

参数：

font_family_cn: 'Inter','TsangerJinKai02','Source Han Sans SC','Noto Sans CJK SC','PingFang SC','Microsoft YaHei',Arial,sans-serif
font_family_en: 'Newsreader','Source Serif 4','Source Serif Pro','Charter',Georgia,'Times New Roman',serif
font_size: 16
line_height: 1.55
accent_color: '#1B365D'
background_color: '#f5f4ed'
surface_color: '#faf9f5'
text_color: '#141413'
secondary_color: '#5e5d59'
heading_font: 'TsangerJinKai02','Source Han Serif SC','Noto Serif CJK SC','Songti SC','STSong',Georgia,serif
code_font: 'JetBrains Mono','SF Mono','Fira Code',Consolas,Monaco,'TsangerJinKai02','Source Han Serif SC',monospace

2. magazine 系列（电子杂志 × 电子墨水）

从 magazine-web-ppt 迁移来的 5 套预设，保留 ink / paper / tint 的杂志色彩关系，同时改造成微信公众号安全 HTML：不使用 rgba()，所有背景色均为 solid hex。

共同特点：

• 每个主题都有独立字体栈、字号、行距、段距、标题结构、列表 marker、引用块、代码块和图片说明。
• 分隔以留白、短淡线和局部标识为主；不会在每个章节之间自动插入整宽实线。
• 五个主题共享 magazine-editorial renderer 入口，但通过 magazine_variant 走不同结构分支，不只是替换颜色。
• 所有背景色都使用 solid hex，并在区块与文本 span 上重复声明 background-color，降低复制到公众号编辑器后背景色丢失的概率。
• 图片自身带 margin:0 auto 居中兜底，避免公众号编辑器复制后改写图片宽度导致图片靠左。
• 版式保留杂志感，但输出仍完全内联，可直接复制到公众号编辑器。

3. elegant（优雅复古）

特点：

• 中文：方正书宋（FZShuSong-Z01）
• 英文：Garamond
• 整体淡灰色背景
• 红色强调色系统
• 衬线标题 + 等宽代码

适用场景： 商业案例、深度分析、知识分享

参数：

font_family_cn: 'FZShuSong-Z01','Songti SC',STSong,serif
font_family_en: 'Garamond',serif
font_size: 16
line_height: 1.9
accent_color: '#cf4436'
background_color: '#f7f6f1'
heading_font: 'Noto Serif SC','Songti SC',STSong,Georgia,serif
code_font: 'JetBrains Mono','SF Mono',Menlo,Consolas,monospace

4. modern（现代简约）

特点：

• 无衬线字体
• 纯白背景
• 蓝色强调色
• 清晰现代

适用场景： 科技产品、教程、快讯

参数：

font_family_cn: 'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif
font_family_en: 'SF Pro Display','Helvetica Neue',sans-serif
font_size: 16
line_height: 1.8
accent_color: '#007aff'
background_color: '#ffffff'
heading_font: 'PingFang SC','Hiragino Sans GB',sans-serif
code_font: 'SF Mono',Menlo,Consolas,monospace

5. minimal（极简主义）

特点：

• 极简黑白
• 大量留白
• 灰色调
• 克制优雅

适用场景： 哲学思考、个人随笔、艺术评论

参数：

font_family_cn: 'Noto Sans SC','PingFang SC',sans-serif
font_family_en: 'Inter','Helvetica Neue',sans-serif
font_size: 15
line_height: 2.0
accent_color: '#333333'
background_color: '#fafafa'
heading_font: 'Noto Sans SC',sans-serif
code_font: 'JetBrains Mono',monospace

Renderer Presets

主题不只换颜色。每个主题绑定一个 Markdown 渲染人格，负责标题、正文、引用、列表、代码、图片说明的结构、字号、行高、间距和字重。

公众号兼容硬规则： 所有 preset 输出均为 inline style；背景色使用 solid hex；外层 section、内容 section、文本 span 会重复声明 background-color。

主题参数说明

输出规则

默认输出路径：

• 输入：path/to/article.md
• 输出：path/to/article_wechat.html

输出内容：

1. 完整的 HTML 文件
2. 内联样式（可直接复制到公众号）
3. 保留图片链接
4. 自动处理代码块、引用块、列表等

工作流程

1. 读取 Markdown 文件

- 解析 frontmatter（标题、摘要等） - 提取正文内容

1. 加载主题配置

- 读取主题参数 - 应用用户自定义参数

1. 转换为 HTML

- Markdown → HTML 结构 - 应用主题样式（内联） - 处理特殊元素（代码、图片、引用）

1. 输出文件

- 生成完整 HTML - 保存到指定路径 - 输出使用说明

主题预览

不确定选哪个主题？使用主题预览生成器对比所有主题效果：

# 生成所有主题的预览页面（使用默认示例文章）
node scripts/generate-preview.mjs

# 使用自定义文章生成预览
node scripts/generate-preview.mjs path/to/your-article.md

# 只预览指定主题（逗号分隔，无空格）
node scripts/generate-preview.mjs article.md --themes magazine-ink,magazine-indigo,magazine-forest,magazine-kraft,magazine-dune

# 自定义输出路径
node scripts/generate-preview.mjs article.md --themes kami,elegant --output /path/to/my-preview.html

预览页面会并排展示所选主题的效果，方便快速对比选择。生成的 preview.html 可以在浏览器中打开查看。

扩展新主题

步骤：

1. 在 themes/ 目录创建新主题配置文件：

``yaml # themes/my-theme.yaml name: my-theme description: 我的自定义主题 fontfamilycn: 'Custom Font CN' fontfamilyen: 'Custom Font EN' fontsize: 16 lineheight: 1.8 accentcolor: '#ff6b6b' backgroundcolor: '#f8f9fa' headingfont: 'Heading Font' codefont: 'Code Font' ``

1. 使用新主题：

``bash /wechat-styler article.md --theme my-theme ``

注意事项

1. 字体回退：所有字体都有完整的回退栈，确保在不同系统上都能正常显示
2. 图片处理：保留原始图片链接，确保图床可访问
3. 代码块：使用等宽字体 + 浅色背景
4. 引用块：浅底或细左线，避免厚重边框
5. 图片居中：图片同时使用父级 text-align:center 和自身 margin:0 auto，防止公众号编辑器复制后图片偏移
6. 公众号兼容：所有样式内联，背景色使用 solid hex，避免 rgba / body 背景在编辑器中丢失

示例

输入 Markdown：

---
title: 文章标题
summary: 文章摘要
---

## 章节标题

这是一段正文，包含**加粗**和`代码`。

![图片说明](https://example.com/image.png)

> 这是一段引用

输出 HTML：

• 完整的公众号可用 HTML
• 所有样式内联
• 可直接复制粘贴

技术实现

核心脚本： scripts/convert.mjs

依赖：

• Node.js 18+
• marked（Markdown 解析）
• js-yaml（YAML 解析）

目录结构：

wechat-styler/
├── SKILL.md
├── scripts/
│   └── convert.mjs
├── themes/
│   ├── elegant.yaml
│   ├── kami.yaml
│   ├── magazine-dune.yaml
│   ├── magazine-forest.yaml
│   ├── magazine-indigo.yaml
│   ├── magazine-ink.yaml
│   ├── magazine-kraft.yaml
│   ├── modern.yaml
│   └── minimal.yaml
└── templates/
    └── base.html

最后更新： 2026-04-24 版本： 1.3.0 作者： 大鹏