- 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/
.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
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 codecode`
Tables
GitHub-flavored markdown tables
Images
Links
text
with footnote references
Blockquotes
quote Lists - unordered, 1. ordered Alerts [!NOTE] , [!WARNING] , etc. Footnotes [^1] references Ruby text `{base Mermaid
mermaid diagrams PlantUMLplantuml 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.