Markdown to WeChat HTML

When to Use

Use This Skill When

• Need to publish Markdown articles to WeChat Official Account
• Need to customize the theme color of WeChat Official Account articles
• Generate styled WeChat Official Account HTML content
• Batch convert Markdown documents to WeChat Official Account format
• Need special components like scenario cards, conclusion boxes, etc.
• Ensure consistent display of WeChat Official Account articles across platforms

Do NOT Use This Skill If

• Need complex interactive layout
• Images need to be embedded directly (WeChat does not support external image URLs)
• Need dynamic content or scripts
• Article exceeds 20,000 words (WeChat's recommended limit)

Typical Trigger Phrases

• "Markdown to WeChat Official Account"
• "Generate WeChat Official Account HTML"
• "WeChat Official Account formatting tool"
• "Publish to WeChat Official Account"
• "WeChat article conversion"
• "WeChat Official Account styles"

• "Markdown to WeChat"
• "Generate WeChat HTML"
• "WeChat article formatter"
• "Convert to WeChat format"
• "WeChat publishing tool"
• "WeChat style conversion"

Workflow

Step 1: Prepare Markdown Content

# Article Main Title
## Section Title
### Subsection Title
> Quoted Content
- List Item
| Table | Data |

Step 2: Configure Metadata

converter = MarkdownToWechatConverter(
    title="Article Title",
    subtitle="Subtitle",
    author="Author Name",
    tags=["Tag1", "Tag2"]
)

Step 3: Execute Conversion

./skills/md-to-wechat/scripts/md-to-wechat.sh input.md -o output.html

Step 4: Verify and Publish

• Copy HTML to WeChat Official Account Editor
• Upload images to WeChat Material Library
• Preview on iOS/Android real devices

Guardrails

Anti-Patterns

• ❌ Use external image URLs (WeChat does not support this)
• ❌ Article exceeds 20,000 words
• ❌ Do not test mobile display effects
• ❌ Ignore WeChat's style restrictions

Limitations

• Does not support CSS variables and pseudo-elements
• External image URLs must be uploaded to the material library
• Complex tables may display abnormally
• Some special characters need to be escaped

Important Notes

1. Image Handling: WeChat Editor does not support external image URLs; upload them to WeChat Material Library
2. Preview Testing: Always preview on iOS and Android real devices
3. Word Count Limit: Single articles are recommended to not exceed 20,000 words
4. Style Compatibility: Use full inline styles to ensure compatibility

Supported Markdown Syntax

# Heading

## Heading

### Heading

> Quote

**Bold**

`Code`

\

| Table |

- List

【Scenario Recap】

【Conclusion】

Usage

Command Line

# Basic Usage
./skills/md-to-wechat/scripts/md-to-wechat.sh input.md

# Specify Output File
./skills/md-to-wechat/scripts/md-to-wechat.sh input.md -o output.html

# Full Parameters
./skills/md-to-wechat/scripts/md-to-wechat.sh input.md \
  -o output.html \
  -t "Article Title" \
  -s "Subtitle Description" \
  -a "Author Name" \
  --tags "Tag1,Tag2,Tag3"

Python API

from skills.md_to_wechat.md_to_wechat import MarkdownToWechatConverter

# Create Converter
converter = MarkdownToWechatConverter(
    title="Article Title",
    subtitle="Subtitle",
    author="Author",
    tags=["Tag1", "Tag2"]
)

# Convert Markdown
with open('input.md', 'r', encoding='utf-8') as f:
    markdown_text = f.read()

html = converter.convert(markdown_text)

# Save
with open('output.html', 'w', encoding='utf-8') as f:
    f.write(html)

Style Components

Chapter Heading (##)

<div style="display:flex;align-items:center;gap:12px;">
  <div style="width:6px;height:28px;background:#d4a574;border-radius:3px;"></div>
  <h2>Section Title</h2>
</div>

Quote Block (>)

> Quoted Content
> —— Author Name

Scene Card (【Scenario Recap】)

【Scenario Recap】
Here is the scenario description content...

Conclusion Box (【Conclusion】)

【Conclusion】
Here is the conclusion content...

Table

| Item | Cost | Frequency |
|------|------|------|
| Token | $0.003 | Recurring |
| Server | $20 | Monthly |

Code Block

```json
{
  "key": "value"
}

## Theme Colors

Default theme uses gold + coral colors, customizable:

```python
colors = {
    'primary': '#d4a574',      # Gold - Primary Color
    'accent': '#e07a5f',       # Coral - Accent Color
    'dark': '#2d3436',         # Dark - Table Header
    'text': '#1a1a1a',         # Main Text
    'text_secondary': '#666',  # Secondary Text
    'bg_light': '#f5f5f5',     # Light Gray Background
    'bg_card': '#f8f9fa',      # Card Background
}

converter = MarkdownToWechatConverter(colors=colors)

Compatibility

• ✅ WeChat Official Account Editor
• ✅ WeChat Work
• ✅ WeChat Built-in Browser
• ✅ Supports iOS/Android/Windows

Related Skills

Workflow Integration

Workflow: Long-form Article → WeChat Official Account

from skills.long_form_writer import expand_outline
from skills.md_to_wechat.md_to_wechat import MarkdownToWechatConverter

# Generate Long-form Article
markdown_text = expand_outline(outline_path="outline.md")

# Convert to WeChat Official Account HTML
converter = MarkdownToWechatConverter(
    title="Article Title",
    subtitle="Subtitle",
    author="Author"
)
html = converter.convert(markdown_text)

# Save
with open("wechat.html", "w", encoding="utf-8") as f:
    f.write(html)

Changelog

• v1.0.0 (2026-02-14)
  • Initial version
  • Supports basic Markdown syntax conversion
  • Supports special components like scenario cards, conclusion boxes, etc.
  • Supports custom theme colors

About UniqueClub