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.
| 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: Confirm Theme
Before converting, use AskUserQuestion to confirm the theme (unless user already specified):
| 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:
| --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
| default
| 经典主题 - 传统排版,标题居中带底边,二级标题白字彩底
| grace
| 优雅主题 - 文字阴影,圆角卡片,精致引用块 (by @brzhang)
| simple
| 简洁主题 - 现代极简风,不对称圆角,清爽留白 (by @okooo5km)
Supported Markdown Features
| 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.