WeChat Styler - WeChat Official Account Typesetting Tool

Convert Markdown articles into elegant HTML format for WeChat Official Accounts, supporting multi-theme switching.

Usage

bash

# Basic Usage (Use Default Theme)
/wechat-styler path/to/article.md

# Specify Theme
/wechat-styler path/to/article.md --theme kami
/wechat-styler path/to/article.md --theme magazine-ink

# Batch Conversion (Supports Glob Pattern)
/wechat-styler "articles/*.md" --theme kami
/wechat-styler "01_项目/内容创作/**/*.md" --theme magazine-ink

# Custom Parameters
/wechat-styler path/to/article.md --theme kami --font-size 17 --accent-color "#1B365D"

# Output to Specified Path (Single File)
/wechat-styler path/to/article.md --output path/to/output.html

Available Themes

1. kami (Paper-Style Typesetting) - Default Theme

Features:

Warm parchment paper-style background:
```
#f5f4ed
```
Ink-blue single accent color:
```
#1B365D
```
Chinese headings use a serif/regular script font stack, body text uses a stable sans-serif font stack
Warm grayscale palette, no cold gray or pure white large backgrounds
Blue vertical line on the left of headings, solid tag background, restrained quote blocks
All background colors use solid hex values, and are declared repeatedly in outer layers, content layers, and text layers to reduce the risk of background loss after pasting into the official account

Applicable Scenarios: In-depth official account articles, business analysis, course content, formal explanatory texts

Parameters:

yaml

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 Series (E-Magazine × E-Ink)

5 presets migrated from

magazine-web-ppt

, retaining the magazine color relationship of

ink / paper / tint

, while transformed into WeChat Official Account-safe HTML: no

rgba()

is used, all background colors are solid hex values.

Theme	Command	Variant	Font / Layout Personality
Ink Classic	`--theme magazine-ink`	`ink-classic`	Sans-serif body text + serif headings, thin rules, dash lists, pull quotes, universal magazine inner pages
Indigo Porcelain	`--theme magazine-indigo`	`indigo-research`	Inter/SF Pro body text + Source Serif headings, left research bar, note quotes, technical code blocks
Forest Ink	`--theme magazine-forest`	`forest-fieldnote`	Regular script/Songti body text + non-fiction headings, centered headings, field note quotes, natural image captions
Kraft Paper	`--theme magazine-kraft`	`kraft-archive`	Songti body text + archive title boxes, archive-style quotes, Roman numeral ordered lists, old paper code boxes
Dune	`--theme magazine-dune`	`dune-gallery`	Avenir body text + Didot/Bodoni headings, right-aligned gallery headings, gallery quotes, minimalist image captions

Common Features:

Each theme has independent font stacks, font sizes, line heights, paragraph spacing, heading structures, list markers, quote blocks, code blocks, and image captions.
Separation mainly uses white space, short light lines, and local identifiers; no full-width solid lines are automatically inserted between chapters.
The five themes share the
```
magazine-editorial
```
renderer entry, but follow different structural branches through
```
magazine_variant
```
, not just color replacement.
All background colors use solid hex values, and
```
background-color
```
is declared repeatedly on blocks and text spans to reduce the probability of background color loss after copying to the official account editor.
Images have
```
margin:0 auto
```
centered fallback to avoid left alignment caused by the official account editor rewriting image width after copying.
The layout retains magazine feel, but the output is fully inline and can be directly copied to the official account editor.

3. elegant (Elegant Retro)

Features:

Chinese: FZShuSong-Z01
English: Garamond
Overall light gray background
Red accent color system
Serif headings + monospaced code

Applicable Scenarios: Business cases, in-depth analysis, knowledge sharing

Parameters:

yaml

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 (Modern Minimalist)

Features:

Sans-serif fonts
Pure white background
Blue accent color
Clear and modern

Applicable Scenarios: Tech products, tutorials, news flashes

Parameters:

yaml

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 (Minimalism)

Features:

Minimalist black and white
Large amounts of white space
Gray tone
Restrained and elegant

Applicable Scenarios: Philosophical thinking, personal essays, art reviews

Parameters:

yaml

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

Themes are not just color changes. Each theme is bound to a Markdown rendering personality, responsible for the structure, font size, line height, spacing, and font weight of headings, body text, quotes, lists, code, and image captions.

Preset	Bound Theme	Layout Tone
`kami-document`	`kami`	Paper-style document: formal, restrained, ink-blue vertical line on the left of headings
`magazine-editorial`	`magazine-ink` / `magazine-indigo` / `magazine-forest` / `magazine-kraft` / `magazine-dune`	E-magazine family: presents five layouts of classic / research / fieldnote / archive / gallery respectively through `magazine_variant`
`elegant-essay`	`elegant`	Retro long-form article: centered headings, stretched line height, excerpt-style quotes
`modern-technical`	`modern`	Modern tutorial: sans-serif hierarchy, prompt cards, technical code blocks
`minimal-notes`	`minimal`	Minimalist notes: low decoration, large white space, thin-line quotes

WeChat Official Account Compatibility Hard Rules: All preset outputs use inline styles; background colors use solid hex values;

background-color

is declared repeatedly in outer sections, content sections, and text spans.

Theme Parameter Description

Parameter	Description	Default Value
`--theme`	Theme Name	`kami`
`--font-size`	Body Font Size (px)	`16`
`--line-height`	Line Height	`1.55`
`--accent-color`	Accent Color (Headings, Links)	`#1B365D`
`--background-color`	Background Color, must use solid hex	`#f5f4ed`
`--max-width`	Maximum Content Width (px)	`640`
`--output`	Output File Path	Auto-generated

Output Rules

Default Output Path:

Input:
```
path/to/article.md
```
Output:
```
path/to/article_wechat.html
```

Output Content:

Complete HTML file
Inline styles (can be directly copied to official account)
Retain image links
Automatically process code blocks, quote blocks, lists, etc.

Workflow

Read Markdown File
- Parse frontmatter (title, summary, etc.)
- Extract body content
Load Theme Configuration
- Read theme parameters
- Apply user-defined parameters
Convert to HTML
- Markdown → HTML structure
- Apply theme styles (inline)
- Process special elements (code, images, quotes)
Output File
- Generate complete HTML
- Save to specified path
- Output usage instructions

Theme Preview

Not sure which theme to choose? Use the theme preview generator to compare the effects of all themes:

bash

# Generate preview pages for all themes (use default sample article)
node scripts/generate-preview.mjs

# Generate preview with custom article
node scripts/generate-preview.mjs path/to/your-article.md

# Preview only specified themes (comma-separated, no spaces)
node scripts/generate-preview.mjs article.md --themes magazine-ink,magazine-indigo,magazine-forest,magazine-kraft,magazine-dune

# Custom output path
node scripts/generate-preview.mjs article.md --themes kami,elegant --output /path/to/my-preview.html

The preview page will display the effects of the selected themes side by side, making it easy to compare and choose quickly. The generated

preview.html

can be opened in a browser to view.

Extend New Theme

Steps:

Create a new theme configuration file in the

themes/

directory:

yaml

# themes/my-theme.yaml
name: my-theme
description: My Custom Theme
font_family_cn: 'Custom Font CN'
font_family_en: 'Custom Font EN'
font_size: 16
line_height: 1.8
accent_color: '#ff6b6b'
background_color: '#f8f9fa'
heading_font: 'Heading Font'
code_font: 'Code Font'

Use the new theme:

bash

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

Notes

Font Fallback: All fonts have complete fallback stacks to ensure normal display on different systems
Image Processing: Retain original image links, ensure image bed is accessible
Code Blocks: Use monospaced fonts + light background
Quote Blocks: Light background or thin left line, avoid heavy borders
Image Centering: Images use both parent
```
text-align:center
```
and their own
```
margin:0 auto
```
to prevent image offset after copying to the official account editor
Official Account Compatibility: All styles are inline, background colors use solid hex values, avoid rgba / body background loss in the editor

Example

Input Markdown:

markdown

---
title: Article Title
summary: Article Summary
---

## Section Title

This is a paragraph of body text, including **bold** and `code`.

![Image Description](https://example.com/image.png)

> This is a quote

Output HTML:

Complete HTML usable for WeChat Official Accounts
All styles are inline
Can be directly copied and pasted

Technical Implementation

Core Script:

scripts/convert.mjs

Dependencies:

Node.js 18+
marked (Markdown parsing)
js-yaml (YAML parsing)

Directory Structure:

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

Last Updated: 2026-04-24 Version: 1.3.0 Author: Dapeng

wechat-styler

NPX Install

Tags

SKILL.md Content (Chinese)

WeChat Styler - WeChat Official Account Typesetting Tool

Usage

Available Themes

1. kami (Paper-Style Typesetting) - Default Theme

2. magazine Series (E-Magazine × E-Ink)

3. elegant (Elegant Retro)

4. modern (Modern Minimalist)

5. minimal (Minimalism)

Renderer Presets

Theme Parameter Description

Output Rules

Workflow

Theme Preview

Extend New Theme

Notes

Example

Technical Implementation