canghe-markdown-to-html — Claude Code skill: how to install
Converts Markdown files into styled HTML with inline CSS for WeChat articles. Handles code blocks, formulas, footnotes, and PlantUML diagrams.
npx skills add freestylefly/canghe-skills --skill canghe-markdown-to-html -a claude-codeWhat canghe-markdown-to-html does
The skill transforms Markdown documents into standalone HTML with inlined CSS rules. It targets publishing workflows such as WeChat Official Account, where external stylesheets are stripped. Tables, callout alerts, ruby text, Mermaid diagrams, and PlantUML render directly into the output document.
Under the hood, the skill runs scripts/main.ts using Bun via npx -y bun. It outputs the converted HTML in the same folder as the input file. If an HTML file already exists at the destination, the runner renames it to a timestamped backup before writing fresh content.
Layouts rely on three themes: default, grace, and simple. You can lock your preferred theme and custom CSS variables inside an EXTEND.md file located in the project directory or user home folder. This avoids passing theme flags on every execution.
What it helps with
- convert Markdown documents into inline-styled HTML
- prepare formatted articles for WeChat Official Account
- render Mermaid and PlantUML diagrams from raw text
- create timestamped backups before overwriting existing HTML files
Example prompts for the agent
- Convert article.md to html using the grace theme
- Turn this markdown file into styled html with --keep-title
- Convert post.md to WeChat-ready HTML
How to install canghe-markdown-to-html
1Skills CLI (Vercel)
npx skills add freestylefly/canghe-skills --skill canghe-markdown-to-html -a claude-code2Manually: put the files in place
~/.claude/skills/canghe-markdown-to-html/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/canghe-markdown-to-html/
1Skills CLI (Vercel)
npx skills add freestylefly/canghe-skills --skill canghe-markdown-to-html -a codex2Manually: put the files in place
.agents/skills/canghe-markdown-to-html/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add freestylefly/canghe-skills --skill canghe-markdown-to-html -a cursor2Manually: put the files in place
.cursor/skills/canghe-markdown-to-html/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install freestylefly/canghe-skills canghe-markdown-to-html2Manually: put the files in place
.github/skills/canghe-markdown-to-html/SKILL.md1Skills CLI (Vercel)
npx skills add freestylefly/canghe-skills --skill canghe-markdown-to-html -a gemini-cli2Platform CLI
gemini skills install https://github.com/freestylefly/canghe-skills --path skills/canghe-markdown-to-htmlManually: put the files in place
.devin/skills/canghe-markdown-to-html/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add freestylefly/canghe-skills --skill canghe-markdown-to-html -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about canghe-markdown-to-html
How to install canghe-markdown-to-html in Claude Code?
Run npx skills add freestylefly/canghe-skills --skill canghe-markdown-to-html -a claude-code in your terminal.
What does canghe-markdown-to-html do?
It converts Markdown into HTML containing inline styles. The output supports PlantUML diagrams, alerts, syntax-highlighted code blocks, and footnotes.
How are existing files protected from overwriting?
When an HTML file with the same name already exists, the script automatically renames it to a backup file with a timestamp suffix before generating new output.
