markdown-to-html
Skill4 starsChanged 7 months agoMITView on GitHub
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.
We split this skill into the rules it gives an agent
13 rules. 0 are common, 10 are distinctive, and 3 are very specific to this project.
0
Common
Most of the 5 edited versions we read keep these.
10
Distinctive
This author's own choices. Worth a look.
3
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 20
Use Bash to check EXTEND.md existence (priority order):
- Distinctive: line 46
EXTEND.md Supports: Default theme | Custom CSS variables | Code block style
- Distinctive: line 52
Condition: Only execute if input file contains Chinese text.
- Distinctive: line 55
Read input markdown file
- Very specific: line 56
Check if content contains CJK characters (Chinese/Japanese/Korean)
- Distinctive: line 57
If no CJK content → skip to Step 1
- Very specific: line 61
If CJK content detected AND baoyu-format-markdown skill is available:
- Very specific: line 63
Use AskUserQuestion to ask whether to format first.
- Distinctive: line 77
If none found → use AskUserQuestion to confirm
- Distinctive: line 86
If theme is resolved from EXTEND.md: Use it directly, do NOT ask the user.
- Distinctive: line 88
If no default found: Use AskUserQuestion to confirm:
- Distinctive: line 145
Conflict handling: If HTML file already exists, it will be backed up first:
- Distinctive: line 208
If no title is found, extracts from first H1/H2 heading or uses filename.
“Common” is measured: kept by at least 6 in 10 of the 5 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
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 .baoyu-skills/baoyu-markdown-to-html/EXTEND.md && echo "project"
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.baoyu-skills/baoyu-markdown-to-html/EXTEND.md" && echo "user"┌──────────────────────────────────────────────────────────────┬───────────────────┐ │ Path │ Location │ ├──────────────────────────────────────────────────────────────┼───────────────────┤ │ .baoyu-skills/baoyu-markdown-to-html/EXTEND.md │ Project directory │ ├──────────────────────────────────────────────────────────────┼───────────────────┤ │ $HOME/.baoyu-skills/baoyu-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 baoyu-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 baoyu-format-markdown skill to format the file, then use formatted file as input.
If user declines: Continue with original file.
Step 1: Determine Theme
Theme resolution order (first match wins):
- User explicitly specified theme (CLI
--themeor conversation) - EXTEND.md
default_theme(this skill's own EXTEND.md, checked in Step 0) baoyu-post-to-wechatEXTEND.mddefault_theme(cross-skill fallback)- If none found → use AskUserQuestion to confirm
Cross-skill EXTEND.md check (only if this skill's EXTEND.md has no default_theme):
# Check baoyu-post-to-wechat EXTEND.md for default_theme
test -f "$HOME/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md" && grep -o 'default_theme:.*' "$HOME/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md"If theme is resolved from EXTEND.md: Use it directly, do NOT ask the user.
If no default found: Use AskUserQuestion to confirm:
| Theme | Description |
default (Recommended) | 经典主题 - 传统排版,标题居中带底边,二级标题白字彩底 |
grace | 优雅主题 - 文字阴影,圆角卡片,精致引用块 |
simple | 简洁主题 - 现代极简风,不对称圆角,清爽留白 |
red | 红色主题 - 红金配色,宋体排版,传统书法风格 |
orange | 橙色主题 - 暖色调现代风,宽松行距,圆角装饰 |
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, red, orange) | 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) |
red | 红色主题 - 红金配色,宋体排版,传统书法风格 |
orange | 橙色主题 - 暖色调现代风,宽松行距,圆角装饰 |
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 | annotation}` |
| 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.
Other versions5 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 5
- github/awesome-copilot★ 41ksame name
- JaimeParker/stable-jarvis★ 19same name
- tuananhbui89/skills★ 2same name
- jmolz/m0lz.01★ 0same name
- ReaperOAK/ForgeOS★ 0same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository112 other files it gives its agents.
- agentic-evalSkill
- agent-memorySkill
- agent-reachSkill
- agent-team-orchestrationSkill
- claude-apiSkill
- context-engineering-collectionSkill
- developer-growth-analysisSkill
- eval-harnessSkill
- exa-searchSkill
- langsmith-fetchSkill
- mcp-builderSkill
- prompt-engineering-patternsSkill
- rag-implementationSkill
- skill-creatorSkill
- subagent-driven-developmentSkill
- api-design-principlesSkill
- architecture-patternsSkill
- artifacts-builderSkill
- backend-patternsSkill
- changelog-generatorSkill
- clean-content-fetchSkill
- code-reviewSkill
- coding-standardsSkill
- computer-useSkill
- debug-proSkill
- docker-essentialsSkill
- e2e-testingSkill
- frontend-designSkill
- frontend-patternsSkill
- git-essentialsSkill
- microservices-patternsSkill
- modern-javascript-patternsSkill
- nextjs-app-router-patternsSkill
- postgresql-table-designSkill
- python-design-patternsSkill
- python-performance-optimizationSkill
- python-testing-patternsSkill
- react-state-managementSkill
- security-auditorSkill
- sql-toolkitSkill
- tdd-workflowSkill
- typescript-advanced-typesSkill
- using-git-worktreesSkill
- vue-best-practicesSkill
- webapp-testingSkill
- algorithmic-artSkill
- brand-guidelinesSkill
- canvas-designSkill
- comic-creatorSkill
- cover-imageSkill
- doc-coauthoringSkill
- docxSkill
- fal-ai-mediaSkill
- frontend-slidesSkill
- image-genSkill
- pdfSkill
- pptxSkill
- slide-deckSkill
- slidevSkill
- theme-factorySkill
- The first 60 shown.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
Reviews can't be read right now.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

