
canghe-markdown-to-html
Converts Markdown to styled HTML with WeChat-compatible themes. Supports code highlighting, math, PlantUML, footnotes, alerts, and infographics. Use when user asks for "markdown to html", "convert md to html", "md转html", or needs styled HTML output from markdown.
- Installs
- 532
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/freestylefly/canghe-skills --skill canghe-markdown-to-html- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads canghe-markdown-to-html automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Markdown to HTML Converter
Converts Markdown files to beautifully styled HTML with inline CSS, optimized for WeChat Official Account and other platforms.
Script Directory
Agent Execution: Determine this SKILL.md directory as SKILL_DIR, then use ${SKILL_DIR}/scripts/<name>.ts.
| Script | Purpose |
|---|---|
scripts/main.ts | Main entry point |
Preferences (EXTEND.md)
Use Bash to check EXTEND.md existence (priority order):
# Check project-level first
test -f .canghe-skills/canghe-markdown-to-html/EXTEND.md && echo "project"
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.canghe-skills/canghe-markdown-to-html/EXTEND.md" && echo "user"
┌──────────────────────────────────────────────────────────────┬───────────────────┐ │ Path │ Location │ ├──────────────────────────────────────────────────────────────┼───────────────────┤ │ .canghe-skills/canghe-markdown-to-html/EXTEND.md │ Project directory │ ├──────────────────────────────────────────────────────────────┼───────────────────┤ │ $HOME/.canghe-skills/canghe-markdown-to-html/EXTEND.md │ User home │ └──────────────────────────────────────────────────────────────┴───────────────────┘
┌───────────┬───────────────────────────────────────────────────────────────────────────┐ │ Result │ Action │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ Found │ Read, parse, apply settings │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ Not found │ Use defaults │ └───────────┴───────────────────────────────────────────────────────────────────────────┘
EXTEND.md Supports: Default theme | Custom CSS variables | Code block style
Workflow
Step 0: Pre-check (Chinese Content)
Condition: Only execute if input file contains Chinese text.
Detection:
- Read input markdown file
- Check if content contains CJK characters (Chinese/Japanese/Korean)
- If no CJK content → skip to Step 1
Format Suggestion:
If CJK content detected AND canghe-format-markdown skill is available:
Use AskUserQuestion to ask whether to format first. Formatting can fix:
- Bold markers with punctuation inside causing
**parse failures - CJK/English spacing issues
If user agrees: Invoke canghe-format-markdown skill to format the file, then use formatted file as input.
If user declines: Continue with original file.
Step 1: Confirm Theme
Before converting, use AskUserQuestion to confirm the theme (unless user already specified):
| Theme | Description |
|---|---|
default (Recommended) | 经典主题 - 传统排版,标题居中带底边,二级标题白字彩底 |
grace | 优雅主题 - 文字阴影,圆角卡片,精致引用块 |
simple | 简洁主题 - 现代极简风,不对称圆角,清爽留白 |
Step 2: Convert
npx -y bun ${SKILL_DIR}/scripts/main.ts <markdown_file> --theme <theme>
Step 3: Report Result
Display the output path from JSON result. If backup was created, mention it.
Usage
npx -y bun ${SKILL_DIR}/scripts/main.ts <markdown_file> [options]
Options:
| Option | Description | Default |
|---|---|---|
--theme <name> | Theme name (default, grace, simple) | default |
--title <title> | Override title from frontmatter | |
--keep-title | Keep the first heading in content | false (removed) |
--help | Show help |
Examples:
# Basic conversion (uses default theme, removes first heading)
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md
# With specific theme
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --theme grace
# Keep the first heading in content
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --keep-title
# Override title
npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --title "My Article"
Output
File location: Same directory as input markdown file.
- Input:
/path/to/article.md - Output:
/path/to/article.html
Conflict handling: If HTML file already exists, it will be backed up first:
- Backup:
/path/to/article.html.bak-YYYYMMDDHHMMSS
JSON output to stdout:
{
"title": "Article Title",
"author": "Author Name",
"summary": "Article summary...",
"htmlPath": "/path/to/article.html",
"backupPath": "/path/to/article.html.bak-20260128180000",
"contentImages": [
{
"placeholder": "MDTOHTMLIMGPH_1",
"localPath": "/path/to/img.png",
"originalPath": "imgs/image.png"
}
]
}
Themes
| Theme | Description |
|---|---|
default | 经典主题 - 传统排版,标题居中带底边,二级标题白字彩底 |
grace | 优雅主题 - 文字阴影,圆角卡片,精致引用块 (by @brzhang) |
simple | 简洁主题 - 现代极简风,不对称圆角,清爽留白 (by @okooo5km) |
Supported Markdown Features
| Feature | Syntax |
|---|---|
| Headings | # H1 to ###### H6 |
| Bold/Italic | **bold**, *italic* |
| Code blocks | ```lang with syntax highlighting |
| Inline code | `code` |
| Tables | GitHub-flavored markdown tables |
| Images |  |
| Links | [text](url) with footnote references |
| Blockquotes | > quote |
| Lists | - unordered, 1. ordered |
| Alerts | > [!NOTE], > [!WARNING], etc. |
| Footnotes | [^1] references |
| Ruby text | `{base |
| Mermaid | ```mermaid diagrams |
| PlantUML | ```plantuml diagrams |
Frontmatter
Supports YAML frontmatter for metadata:
---
title: Article Title
author: Author Name
description: Article summary
---
If no title is found, extracts from first H1/H2 heading or uses filename.
Extension Support
Custom configurations via EXTEND.md. See Preferences section for paths and supported options.
FAQ
What does the canghe-markdown-to-html skill do?
Converts Markdown to styled HTML with WeChat-compatible themes. Supports code highlighting, math, PlantUML, footnotes, alerts, and infographics. Use when user asks for "markdown to html", "convert md to html", "md转html", or needs styled HTML output from markdown.
How do I install canghe-markdown-to-html?
Run npx skills add https://github.com/freestylefly/canghe-skills --skill canghe-markdown-to-html in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/canghe-markdown-to-html/ (personal) or .claude/skills/canghe-markdown-to-html/ (project).
Which AI agents can use canghe-markdown-to-html?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is canghe-markdown-to-html safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains canghe-markdown-to-html?
It is published by freestylefly in freestylefly/canghe-skills. It has 532 recorded installs.
More from freestylefly/canghe-skills
manga-drama
freestylefly/canghe-skills
漫剧生成器 - 基于 Seedance 的漫画风格短剧生成工具。支持以主角图片为基础,自动生成漫剧分镜脚本并生成视频。适用于创作漫画风格的短视频、角色故事、动画短片等。当用户想要生成漫画风格的视频短剧、角色故事或漫剧时使用此技能。
manga-style-video
freestylefly/canghe-skills
漫画风格视频生成器 - 专门生成日式治愈系、国风水墨、美式卡通等漫画风格的动画视频。内置8种漫画风格模板,支持图生视频,一键生成高质量漫画动画。当用户需要生成漫画风格、动画风格、手绘风格的视频时使用此技能。
seedance-video
freestylefly/canghe-skills
使用字节跳动 Seedance 模型生成视频。支持文生视频和图生视频功能,通过 volcengine-ark SDK 调用 API。当用户需要生成视频、创建视频内容或基于文字/图片制作视频时激活此技能。
canghe-image-gen
freestylefly/canghe-skills
AI image generation with OpenAI, Google, DashScope and Canghe APIs. Supports text-to-image, reference images, aspect ratios. Sequential by default; parallel generation available on request. Use when user asks to generate, create, or draw images.
canghe-comic
freestylefly/canghe-skills
Knowledge comic creator supporting multiple art styles and tones. Creates original educational comics with detailed panel layouts and sequential image generation. Use when user asks to create "知识漫画", "教育漫画", "biography comic", "tutorial comic", or "Logicomix-style comic".
volcengine-video-understanding
freestylefly/canghe-skills
火山视频理解 - 使用火山方舟视频理解 API 分析视频内容。通过 Files API 上传视频(推荐),支持大文件(最大512MB),可用于视频内容分析、物体识别、动作理解等。当用户需要分析视频、理解视频内容、提取视频信息时激活此技能。
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.