WeChat Article Formatter（微信文章格式化）

将 Markdown 文章转换为可直接粘贴到微信公众号编辑器的 HTML 格式。

核心能力

📝 Markdown → 微信 HTML
🎨 自动插入配图（从 illustrations 目录）
🎯 微信样式优化（字体、间距、引用块）
📱 移动端适配

使用方式

# 基础用法
/wechat-article-formatter article.md

# 指定配图目录
/wechat-article-formatter article.md --images ./illustrations/

工作流程（5步）

Step 1: 读取 Markdown 文章

读取输入的 Markdown 文件内容。

Step 2: 查找配图

检查同目录下是否有 illustrations/ 目录：

如有，读取所有图片文件
按章节匹配图片（根据文件名前缀 01-, 02- 等）

Step 3: 转换为 HTML

转换规则：

Markdown	微信 HTML
`# 标题`	`<h1 style="...">标题</h1>`
`## 小标题`	`<h2 style="...">小标题</h2>`
`加粗`	`<strong style="color:#d4237a;">加粗</strong>`
`> 引用`	`<blockquote style="...">引用</blockquote>`
段落	`<p style="...">段落</p>`
表格	`<table style="...">...</table>`

微信样式规范：

/* 正文 */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.8;
color: #333;

/* 标题 */
h1: font-size: 22px; font-weight: bold; margin: 20px 0;
h2: font-size: 18px; font-weight: bold; margin: 15px 0; border-left: 4px solid #d4237a; padding-left: 10px;

/* 引用块 */
blockquote: background: #f7f7f7; border-left: 4px solid #d4237a; padding: 15px; margin: 15px 0;

/* 加粗 */
strong: color: #d4237a;

/* 段落 */
p: margin: 15px 0; text-align: justify;

Step 4: 插入配图

在每个 H2 章节后插入对应的配图：

<figure style="margin: 20px 0; text-align: center;">
  <img src="data:image/png;base64,{base64_data}" style="max-width: 100%; border-radius: 8px;" />
</figure>

图片处理：

将图片转换为 base64 内嵌（便于直接粘贴）
或输出图片 URL 列表（需要手动上传）

Step 5: 输出 HTML

保存为 {filename}_wechat.html，可直接复制粘贴到微信公众号编辑器。

输出示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文章标题</title>
</head>
<body style="max-width: 600px; margin: 0 auto; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, sans-serif;">

<h1 style="font-size: 22px; font-weight: bold; text-align: center; margin-bottom: 30px;">
  50万秦军去哪了？基因和语言揭开了一个惊天秘密
</h1>

<p style="font-size: 16px; line-height: 1.8; color: #333; margin: 15px 0;">
  你有没有想过这样一个问题：
</p>

<p style="font-size: 16px; line-height: 1.8; color: #333; margin: 15px 0;">
  <strong style="color: #d4237a;">秦始皇派去岭南的50万大军，后来都去哪了？</strong>
</p>

<!-- 更多内容... -->

</body>
</html>

与其他 Skill 配合

顺序	Skill	功能
1	document-writer	生成 Markdown 文章
2	illustration-generator	为文章生成配图
3	wechat-article-formatter	格式化为微信 HTML
4	wechat-publisher	发布到微信公众号