wechat-article-formatter

Original：🇨🇳 Chinese

Translated

2 scriptsChecked / no sensitive code detected

Convert Markdown articles into beautified HTML format, optimized for WeChat Official Account publishing. Apply professional CSS styles, code highlighting, and optimized typography. Use this when users say "Beautify this article", "Convert to HTML", "Optimize Official Account format", or "Generate Official Account HTML".

19installs

Sourcesolar-luna/fully-automatic-article-generation-skill

Added on2026-02-07

NPX Install

npx skill4agent add solar-luna/fully-automatic-article-generation-skill wechat-article-formatter

SKILL.md Content (Chinese)

View Translation Comparison →

WeChat Official Account Article Formatting Tool (Claude Execution Guide)

Objective: Convert Markdown articles into elegant HTML optimized for WeChat Official Accounts, enabling one-click publishing.

Core Value: 15x efficiency improvement (30 minutes → 2 minutes), consistent and professional formatting.

New Upgrade: AI Tech Theme designed specifically for AI-related content, supporting rich visual components and custom syntax.

Theme Description

This tool uses the AI Tech Theme (ai-tech-theme), designed specifically for AI-related content:

Progressive purple-blue-green color scheme (retains original purple, expands to cyan, green and other auxiliary colors)
Rich visual components (info cards, badges, tables, code blocks, etc.)
AI domain-specific components (model comparison, Prompt examples, API calls, performance metrics)
Atom One Dark code highlighting
Responsive design, mobile-friendly

New Component Usage

Info Cards

Use

:::

syntax to create different types of info boxes:

markdown

::: info
This is an information prompt
:::

::: success
Operation successful! Model training completed.
:::

::: warning
Note: This operation will consume a large number of tokens
:::

::: danger
Error: Invalid API key
:::

::: tech
Technical Tip: Use the --temperature parameter to control output randomness
:::

Badge Tags

Use

[!TEXT]

syntax to add badges:

markdown

GPT-4 [!NEW] supports multimodal input [!AI]

Claude Opus [!推荐] has the strongest reasoning ability

Supported badge types:

```
[!NEW]
```
- Gradient purple-blue badge (new feature)
```
[!AI]
```
- Cyan badge (AI-related)
```
[!推荐]
```
- Purple badge (recommended content)
```
[!成功]
```
- Green badge (success status)
```
[!警告]
```
- Yellow badge (warning prompt)

⚡ Execution Process (Strictly Follow)

Step 1: Obtain Input File

Scenario Judgment:

Scenario	How to Handle
User provides file path	Use the path directly
User pastes Markdown content	First use the Write tool to save as a .md file
Just used wechat-tech-writer	Automatically find the latest generated .md file (see Integration Guide)
User only says "Beautify article"	Ask the user: file path or paste content

Automatic Detection of Latest Article (Integration with wechat-tech-writer):

bash

# Find the latest .md file in current directory
latest_md=$(ls -t *.md 2>/dev/null | head -1)
if [ -n "$latest_md" ]; then
    echo "Detected latest article: $latest_md"
fi

Step 2: Execute Conversion

Standard Conversion Command:

bash

cd /root/.claude/skills/wechat-article-formatter

python3 scripts/markdown_to_html.py \
  --input "{file path}" \
  --output "{output path}" \
  --preview

Parameter Explanation:

```
--input
```
: Markdown file path (required)
```
--output
```
: HTML output path (optional, default is same name .html)
```
--theme
```
: Theme selection (only ai-tech is available now, can be omitted)
```
--preview
```
: Automatically open preview in browser after conversion (recommended)

Example:

bash

# Most commonly used: convert and preview
python3 scripts/markdown_to_html.py \
  --input "Claude_Sonnet_4介绍.md" \
  --preview

Important Reminder:

WeChat Official Account has an independent title input box, so H1 titles are automatically removed from the HTML

The converted HTML contains a comment:

<!-- ⚠️ Please fill in the title separately in the WeChat Official Account editor -->

Step 3: Quality Check

After conversion, must check:

Use the Read tool to read the generated HTML file (first 50 lines) and check:

Check Item	How to Verify	Common Issues
Title Style	Check the style attribute of `<h2>` , `<h3>` tags	Style missing → re-convert
Code Highlighting	Check if `<pre><code>` has syntax highlighting styles	No highlighting → check if Markdown specifies language
Info Cards	Check if contains `class="alert alert-info"` etc.	Not converted → check ::: syntax format
Badges	Check if contains `class="badge badge-new"` etc.	Not converted → check [!] syntax format
Image Path	Check the path in `<img src="">`	Local path → remind user to upload to WeChat
Table Format	Check if `<table>` has inline styles	Format messy → simplify number of table columns

Quick Check Commands:

bash

# View first 50 lines of HTML file
head -50 output.html

# Check if info cards are included
grep -o 'class="alert alert-[^"]*"' output.html

# Check if badges are included
grep -o 'class="badge [^"]*"' output.html

Step 4: Preview and Feedback

Ask User:

✅ Conversion successful! Generated: {output file path}

Preview effect:
- Opened preview in browser
- Or visit: file://{absolute path}

Please check the effect, are you satisfied?
- Satisfied → Proceed to Step 5 (Publishing Guide)
- Need adjustments → Modify Markdown and re-convert

If User is Unsatisfied:

Problem	Solution
"Info boxes not displayed"	Check if correct ::: syntax is used
"Badges not displayed"	Check if correct [!] syntax is used
"Code blocks not highlighted"	Check if Markdown code blocks specify language (```python)
"Images not displaying properly"	Reminder: Local images need to be uploaded to WeChat editor
"Table too wide"	Suggest simplifying table (≤4 columns) or accepting horizontal scrolling

Step 5: Publishing Guide

Complete Guide for User:

📋 Steps to Publish to WeChat Official Account:

1. Open WeChat Official Account Editor
2. ✅ Fill in article title in the title bar: {Title extracted from Markdown}
3. Open the generated HTML file: {file path}
4. Press Ctrl+A (select all) → Ctrl+C (copy) in browser
5. Paste into editor content area (Ctrl+V)
6. Handle images:
   - Delete local image references that cannot be displayed
   - Re-upload images to WeChat editor
7. Final check: Title hierarchy, paragraph spacing, code blocks, info cards, badges
8. Use the "Preview" function in WeChat editor to view on mobile
9. Publish after confirmation

⚠️ Notes:
- Styles are inline, can be pasted directly
- Local images need to be re-uploaded
- WeChat editor may fine-tune some styles after pasting (normal)
- Background colors of info cards and badges will be retained

🔄 Integration with wechat-tech-writer

Scenario: Just used wechat-tech-writer to generate article

Identification Signs:

User just said "Write an article about XXX"
There is a newly generated .md file in current directory

Automation Process:

bash

# 1. Find latest article
latest_article=$(ls -t *.md 2>/dev/null | head -1)

# 2. Confirm if it's the target article
echo "Detected latest article: $latest_article"
echo "Do you want to convert this article? (y/n)"

# 3. Automatic conversion (AI Tech Theme)
python3 scripts/markdown_to_html.py \
  --input "$latest_article" \
  --preview

Seamless Transition Script:

Detected you just generated an article with wechat-tech-writer: {file name}
Now beautifying the format with AI Tech Theme...

❌ Error Handling Table

Error Message	Cause	What Claude Should Do
`FileNotFoundError: Input file not found`	Incorrect file path	Ask user for correct file path
`Unknown theme: xxx`	Incorrect theme name	Prompt that only ai-tech theme is available now
`Theme CSS file not found`	Theme file missing	Check if file exists, reinstall
Conversion successful but code not highlighted	Markdown did not specify language	Remind user to modify code block (```python)
Info boxes not converted	Incorrect ::: syntax format	Check if correct start and end tags are present with correct type (info/success/warning/danger/tech)
Badges not converted	Incorrect [!] syntax format	Check if supported badge type is used
Images cannot be displayed	Local path or external link invalid	Remind user to re-upload in WeChat editor
Table format messy	Table too wide	Suggest simplifying table or converting to image

📚 Quick Reference

Most Commonly Used Commands

Standard Conversion (Most Commonly Used):

bash

python3 scripts/markdown_to_html.py --input article.md --preview

Specify Output Path:

bash

python3 scripts/markdown_to_html.py --input article.md --output output.html --preview

Quick Answers to Common Questions

Q: Styles lost after pasting to WeChat? A: Use "Paste" instead of "Paste and Match Style", or clear editor and re-paste.

Q: Code blocks not highlighted? A: Ensure language is specified in Markdown: ```python (not ```)

Q: Info cards not displayed? A: Check ::: syntax format, ensure start and end tags are present with correct type (info/success/warning/danger/tech)

Q: Badges not displayed? A: Check [!] syntax format, ensure supported badge type is used (NEW/AI/推荐/成功/警告)

Q: How to customize colors? A: Modify CSS variables in

templates/ai-tech-theme.css

(root section)

✅ Execution Checklist (Confirm After Each Execution)

Obtained input file (path or content)
Executed conversion command
Checked generated HTML file (title, code, info cards, badges, images)
Asked user if preview effect is satisfactory
Provided complete publishing guide
Handled possible errors

Remember: The core of this skill is automation + professionalism, allowing users to complete what originally took 30 minutes in just 2 minutes!