SuperAPI AI Directory
Partner中文AI newsFavorites
Skillswechat-styler

wechat-styler

General & other

View repository

Updated 10-16 04:56

About this skill

WeChat Styler - Official Account typesetting tool

Convert Markdown articles into elegant Official Account HTML format, with multi-theme switching support.

Usage

# 基础用法（使用默认主题）
/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
Custom parameters

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

Output to a specified path (single file)

/wechat-styler path/to/article.md --output path/to/output.html


## 可用主题

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

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

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

**参数：**
```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 (digital magazine × e-ink)

From magazine-web-ppt Five presets migrated from, retaining ink / paper / tint magazine color relationships, while also reworked into WeChat Official Account-safe HTML: not using rgba(), all background colors are solid hex.

Theme Command Variant Font / typography personality
Ink Classic --theme magazine-ink ink-classic Sans-serif body + serif headings, thin rule, dash list, pull quote, general magazine inner pages
Indigo Porcelain --theme magazine-indigo indigo-research Inter/SF Pro body + Source Serif headings, left research column, note quote, technical code blocks
Forest Ink --theme magazine-forest forest-fieldnote Kai/Song body + nonfiction headings, centered headings, field note quotes, natural image captions
Kraft Paper --theme magazine-kraft kraft-archive Song body + archive heading box, archival quotes, Roman numeral ordered lists, old-paper code frames
Dune --theme magazine-dune dune-gallery Avenir body + Didot/Bodoni headings, right-aligned gallery headings, gallery quote, minimalist image captions

Common features:

  • Each theme has its own font stack, font size, line spacing, paragraph spacing, heading structure, list markers, quote blocks, code blocks, and image captions.
  • Separation is mainly based on whitespace, short light lines, and local markers; a full-width solid line is not automatically inserted between every section.
  • The five themes share the magazine-editorial renderer entry point, but go through magazine_variant different structural branches, not just color replacement.
  • All background colors use solid hex, and are repeatedly declared on blocks and text spans background-color, reducing the probability of background color loss after copying into the Official Account editor.
  • Images themselves carry margin:0 auto centered fallback, avoiding images being left-aligned due to rewritten image width after copying in the Official Account editor.
  • The layout retains a magazine feel, but the output is still fully inline and can be copied directly into the Official Account editor.

3. elegant (elegant retro)

Features:

  • Chinese: FZShuSong (FZShuSong-Z01)
  • English: Garamond
  • Overall light gray background
  • Red accent color system
  • Serif headings + monospace code

Use cases: Business cases, in-depth analysis, knowledge sharing

Parameters:

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 font
  • Pure white background
  • Blue accent color
  • Clear and modern

Use cases: Tech products, tutorials, news flashes

Parameters:

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
  • Lots of whitespace
  • Gray tones
  • Restrained elegance

Use cases: Philosophical reflection, personal essays, art criticism

Parameters:

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

A theme doesn't just change colors. Each theme is bound to a Markdown rendering persona, 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-feel document: formal, restrained, ink-blue vertical line on the left of headings
magazine-editorial magazine-ink / magazine-indigo / magazine-forest / magazine-kraft / magazine-dune Digital magazine family: via magazine_variant presenting five layouts respectively: classic / research / fieldnote / archive / gallery
elegant-essay elegant Vintage long-form: centered headings, relaxed line spacing, excerpt-style quotes
modern-technical modern Modern tutorial: sans-serif hierarchy, tip cards, technical code blocks
minimal-notes minimal Minimal notes: low ornamentation, generous whitespace, thin-line quotes

Hard rules for WeChat compatibility: All preset output uses inline style; background colors use solid hex; the outer section, content section, and text span repeatedly declare background-color。

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 Content max 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:

  1. Complete HTML file
  2. Inline styles (can be copied directly to WeChat)
  3. Preserve image links
  4. Automatically handle code blocks, quote blocks, lists, etc.

Workflow

  1. Read Markdown file

    • Parse frontmatter (title, summary, etc.)
    • Extract body content

  2. Load theme configuration

    • Read theme parameters
    • Apply user-defined parameters

  3. Convert to HTML

    • Markdown → HTML structure
    • Apply theme styles (inline)
    • Handle special elements (code, images, quotes)

  4. Output file

    • Generate complete HTML
    • Save to the 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:

# 生成所有主题的预览页面（使用默认示例文章）
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

The preview page displays 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 for viewing.

Extend with new themes

Steps:

  1. In the themes/ directory, create a new theme configuration file:

    # themes/my-theme.yaml
name: my-theme
description: 我的自定义主题
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'

  2. Use the new theme:

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

Notes

  1. Font fallback: All fonts have a complete fallback stack to ensure proper display on different systems
  2. Image handling: Preserve original image links to ensure the image host is accessible
  3. Code blocks: Use monospace font + light background
  4. Blockquote: light background or thin left line, avoid heavy borders
  5. Image centering: images use both the parent text-align:center and their own margin:0 autoto prevent image misalignment after copying in the WeChat Official Account editor
  6. WeChat Official Account compatibility: all styles are inline, background colors use solid hex, avoid rgba / body backgrounds being lost in the editor

Example

Input Markdown:

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

## 章节标题

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

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

> 这是一段引用

Output HTML:

  • Complete WeChat Official Account-ready HTML
  • All styles are inline
  • Can be copied and pasted directly

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