wechat-article-formatter

WeChat Article Formatter

Convert Markdown articles to HTML format that can be directly pasted into the WeChat Official Account editor.

Core Capabilities

📝 Markdown → WeChat HTML
🎨 Automatically insert illustrations (from the illustrations directory)
🎯 WeChat style optimization (fonts, spacing, blockquotes)
📱 Mobile adaptation

How to Use

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

Specify the illustration directory

/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>` |

**微信样式规范：**
```css
/* 正文 */
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: Insert Illustrations

Insert the corresponding illustration after each H2 section:

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

Image processing:

Convert images to base64 inline (for easy direct pasting)
Or output a list of image URLs (requires manual upload)

Step 5: Output HTML

Save as {filename}_wechat.html, which can be directly copied and pasted into the WeChat Official Account editor.

Output Example

<!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>

Working with Other Skills

Order	Skill	Function
1	document-writer	Generate Markdown article
2	illustration-generator	Generate illustrations for the article
3	wechat-article-formatter	Format as WeChat HTML
4	wechat-publisher	Publish to WeChat Official Account