agentleFS
GPTtangGPTtang/skill-atlas/skills/document/markdown-to-html/SKILL.md

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
  1. Distinctive:

    Use Bash to check EXTEND.md existence (priority order):

    line 20
  2. Distinctive:

    EXTEND.md Supports: Default theme | Custom CSS variables | Code block style

    line 46
  3. Distinctive:

    Condition: Only execute if input file contains Chinese text.

    line 52
  4. Distinctive:

    Read input markdown file

    line 55
  5. Very specific:

    Check if content contains CJK characters (Chinese/Japanese/Korean)

    line 56
  6. Distinctive:

    If no CJK content → skip to Step 1

    line 57
  7. Very specific:

    If CJK content detected AND baoyu-format-markdown skill is available:

    line 61
  8. Very specific:

    Use AskUserQuestion to ask whether to format first.

    line 63
  9. Distinctive:

    If none found → use AskUserQuestion to confirm

    line 77
  10. Distinctive:

    If theme is resolved from EXTEND.md: Use it directly, do NOT ask the user.

    line 86
  11. Distinctive:

    If no default found: Use AskUserQuestion to confirm:

    line 88
  12. Distinctive:

    Conflict handling: If HTML file already exists, it will be backed up first:

    line 145
  13. Distinctive:

    If no title is found, extracts from first H1/H2 heading or uses filename.

    line 208

“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.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

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.

ScriptPurpose
scripts/main.tsMain 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:

  1. Read input markdown file
  2. Check if content contains CJK characters (Chinese/Japanese/Korean)
  3. 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):

  1. User explicitly specified theme (CLI --theme or conversation)
  2. EXTEND.md default_theme (this skill's own EXTEND.md, checked in Step 0)
  3. baoyu-post-to-wechat EXTEND.md default_theme (cross-skill fallback)
  4. 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:

ThemeDescription
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:

OptionDescriptionDefault
--theme <name>Theme name (default, grace, simple, red, orange)default
--title <title>Override title from frontmatter
--keep-titleKeep the first heading in contentfalse (removed)
--helpShow 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

ThemeDescription
default经典主题 - 传统排版,标题居中带底边,二级标题白字彩底
grace优雅主题 - 文字阴影,圆角卡片,精致引用块 (by @brzhang)
simple简洁主题 - 现代极简风,不对称圆角,清爽留白 (by @okooo5km)
red红色主题 - 红金配色,宋体排版,传统书法风格
orange橙色主题 - 暖色调现代风,宽松行距,圆角装饰

Supported Markdown Features

FeatureSyntax
Headings# H1 to ###### H6
Bold/Italic**bold**, *italic*
Code blocks```lang with syntax highlighting
Inline code`code`
TablesGitHub-flavored markdown tables
Images![alt](src)
Links[text](url) with footnote references
Blockquotes> quote
Lists- unordered, 1. ordered
Alerts> [!NOTE], > [!WARNING], etc.
Footnotes[^1] references
Ruby text`{baseannotation}`
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.

Download now (ZIP)

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.