# canghe-markdown-to-html

Converts Markdown files into styled HTML with inline CSS for WeChat articles. Handles code blocks, formulas, footnotes, and PlantUML diagrams.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 532 installs · ★ 469
- Author: freestylefly
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/freestylefly/canghe-skills/tree/HEAD/skills/canghe-markdown-to-html/SKILL.md
- Updated: 2026-06-08
- HTML: https://affpapa.org/en/nevibecode/skills/canghe-markdown-to-html

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add freestylefly/canghe-skills --skill canghe-markdown-to-html -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/canghe-markdown-to-html/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/canghe-markdown-to-html/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add freestylefly/canghe-skills --skill canghe-markdown-to-html -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/canghe-markdown-to-html/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add freestylefly/canghe-skills --skill canghe-markdown-to-html -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/canghe-markdown-to-html/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install freestylefly/canghe-skills canghe-markdown-to-html
```

2. **Manually: put the files in place**
- File: `.github/skills/canghe-markdown-to-html/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add freestylefly/canghe-skills --skill canghe-markdown-to-html -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/freestylefly/canghe-skills --path skills/canghe-markdown-to-html
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/canghe-markdown-to-html/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add freestylefly/canghe-skills --skill canghe-markdown-to-html -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/freestylefly/canghe-skills/tree/HEAD/skills/canghe-markdown-to-html/SKILL.md

## When to use it
- 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
- 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

## Similar
- [baoyu-markdown-to-html](https://affpapa.org/en/nevibecode/skills/baoyu-markdown-to-html.md) — skill · 32200 installs
- [markdown-to-html](https://affpapa.org/en/nevibecode/skills/markdown-to-html.md) — skill · 9899 installs
- [markdown-html-orchestrator](https://affpapa.org/en/nevibecode/skills/markdown-html-orchestrator.md) — skill · 46 installs
- [qiaomu-markdown-proxy](https://affpapa.org/en/nevibecode/skills/qiaomu-markdown-proxy.md) — skill · 659 installs
- [md2wechat](https://affpapa.org/en/nevibecode/skills/md2wechat.md) — skill · 2500 installs
- [baoyu-danger-x-to-markdown](https://affpapa.org/en/nevibecode/skills/baoyu-danger-x-to-markdown.md) — skill · 28000 installs

From the same set: [freestylefly/canghe-skills](https://affpapa.org/en/nevibecode/by/freestylefly/canghe-skills.md) — 8 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md