with one click
wechat-article-formatter
// Convert markdown to styled HTML for WeChat articles with auto image upload
// Convert markdown to styled HTML for WeChat articles with auto image upload
| name | wechat-article-formatter |
| description | Convert markdown to styled HTML for WeChat articles with auto image upload |
This skill formats markdown files into styled HTML optimized for WeChat public account articles using the bm.md rendering service.
The skill performs the following workflow:
styles/custom.css file in this skill's directoryWhen the user invokes this skill, you should:
The user will provide one of the following:
/path/to/article.md)If the input is unclear, ask the user to provide either a markdown file path or paste the markdown content directly.
Read the custom CSS file from this skill's directory:
{{SKILL_DIR}}/styles/custom.css
Use the Read tool to get the CSS content. This CSS provides the custom styling for the WeChat article.
Before rendering, scan the markdown content for local image references and upload them to get online URLs.
Parse the markdown to find all image references using the pattern . Look for:
For each image found, determine if it's a local file that needs uploading:
Local paths (need upload):
/: /Users/james/images/photo.png./images/photo.png, ../assets/image.jpg, images/pic.pngAlready online (skip):
http:// or https://data:For each local image, calculate its absolute path:
If the user provided a markdown file path:
./images/photo.png in /Users/james/articles/post.md:
/Users/james/articles//Users/james/articles/images/photo.pngIf the user provided raw markdown content:
For each local image with a valid absolute path:
/image-upload skill with the absolute image pathoriginal_path -> online_urlExample invocation:
/image-upload /Users/james/articles/images/photo.png
The /image-upload skill will return a URL like https://files.catbox.moe/abc123.png.
After all images are uploaded, replace the local paths in the markdown content with their corresponding online URLs:
Before:


After:


Important Notes:
After processing all images, provide a summary:
Image Upload Summary:
ā Uploaded: ./images/photo.png ā https://files.catbox.moe/abc123.png
ā Uploaded: /Users/james/screenshots/demo.png ā https://files.catbox.moe/def456.png
ā Failed: ./images/missing.png (File not found)
ā Skipped: https://example.com/existing.png (Already online)
Total: 2 uploaded, 1 failed, 1 skipped
Make a POST request to the bm.md rendering API with the following configuration:
Endpoint: POST https://bm.md/api/markdown/render
Request Body:
{
"markdown": "<the markdown content>",
"markdownStyle": "green-simple",
"platform": "wechat",
"enableFootnoteLinks": true,
"openLinksInNewWindow": true,
"customCss": "<content from {{SKILL_DIR}}/styles/custom.css as string>"
}
Parameter Details:
| Parameter | Type | Value | Description |
|---|---|---|---|
markdown | string | (content) | The markdown content to render |
markdownStyle | string | "green-simple" | Base styling theme for the rendered output |
platform | string | "wechat" | Target platform optimization |
enableFootnoteLinks | boolean | true | Convert links to footnotes |
openLinksInNewWindow | boolean | true | Links open in new window |
customCss | string | (CSS content) | Custom CSS from styles/custom.css file |
Use the Bash tool with curl to make the API request:
curl -X POST https://bm.md/api/markdown/render \
-H "Content-Type: application/json" \
-d '{
"markdown": "<escaped markdown content>",
"markdownStyle": "green-simple",
"platform": "wechat",
"enableFootnoteLinks": true,
"openLinksInNewWindow": true,
"customCss": "<escaped CSS content from styles/custom.css>"
}'
Important Notes:
markdownStyle must be exactly "green-simple" (lowercase with hyphen)customCss should contain the entire CSS file content as a JSON-escaped stringresult fieldAfter receiving the API response:
result field in the JSON response.html extension, or output.html if content was provided directly)After formatting is complete, ask the user if they want to publish the article to WeChat:
"The article has been formatted and saved to
<output_path>. Would you like me to publish it as a draft to your WeChat public account using the/wechat-article-publisherskill?"
If the user confirms, invoke the /wechat-article-publisher skill with the formatted HTML content.
User: Format my article at /Users/james/articles/my-post.md
Assistant Actions:
/Users/james/articles/my-post.mdstyles/custom.css and /Users/james/articles/images/demo.png, /Users/james/screenshots/app.png/image-upload skill/Users/james/articles/my-post.htmlThe bm.md API returns:
{
"result": "<div id=\"bm-md\">...</div>"
}
The result field contains the fully styled HTML with inline CSS, ready to be copied into WeChat's rich text editor.
The custom CSS provides:
If the API call fails:
If the markdown file cannot be read:
This skill integrates with:
/image-upload - For uploading local images to hosting providers and getting shareable URLs (required for local image support)/wechat-article-publisher - For publishing formatted articles as drafts to WeChat public accounts (optional)[HINT] Download the complete skill directory including SKILL.md and all related files