Agent skill

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

Stars 129
Forks 41

Install this agent skill to your Project

npx add-skill https://github.com/zephyrwang6/myskill/tree/main/baoyu-markdown-to-html

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.

Script Purpose
scripts/main.ts Main entry point

Preferences (EXTEND.md)

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

bash
# 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: Confirm Theme

Before converting, use AskUserQuestion to confirm the theme (unless user already specified):

Theme Description
default (Recommended) 经典主题 - 传统排版,标题居中带底边,二级标题白字彩底
grace 优雅主题 - 文字阴影,圆角卡片,精致引用块
simple 简洁主题 - 现代极简风,不对称圆角,清爽留白

Step 2: Convert

bash
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

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

bash
# 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:

json
{
  "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 ![alt](src)
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:

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

Expand your agent's capabilities with these related and highly-rated skills.

zephyrwang6/myskill

start-work

每日工作启动助手。读取Obsidian收件箱、计划文件,提醒今日待办,询问内容创作计划,展示周计划进度,调用热点采集。触发词:"开始工作"、"开启新一天"、"今天做什么"。帮助用户快速进入高效工作状态。

129 41
Explore
zephyrwang6/myskill

doc-coauthoring

Guide users through a structured workflow for co-authoring documentation, articles, or long-form content. Use when user wants to write documentation, proposals, articles, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting articles, or using "co-authoring" workflow.

129 41
Explore
zephyrwang6/myskill

mem-query

AI个人记忆系统的记忆查询功能。检索各层级记忆文件,综合多层级信息回答用户问题。使用场景:(1) 用户问"我的记忆中关于XXX"时;(2) 用户询问自己的习惯/偏好/价值观时;(3) 需要基于用户历史提供建议时。该skill会自动检索L1-L4各层级,引用来源,给出基于记忆的个性化回答。

129 41
Explore
zephyrwang6/myskill

article-review

根据原文内容撰写深度文章评价/解读。当用户提供一篇文章、博客、公众号文章或任何长文内容,并要求生成评价、解读、读后感或二次创作内容时使用此技能。适用于:(1) 对技术文章、行业分析、年终总结等进行深度解读,(2) 提炼文章核心观点并用通俗语言重新表达,(3) 为社交媒体传播生成二次内容。

129 41
Explore
zephyrwang6/myskill

mem-record

AI个人记忆系统的记忆记录功能。自动从对话中提炼关键信息并记录到相应层级。使用场景:(1) 用户说"记录到记忆系统"、"记住这个"、"把这次对话记下来"时;(2) 检测到重要事件、决策、偏好表达时;(3) 用户完成重要任务或做出决策时。该skill会自动判断应该记录到L1情境层、L2行为层、L3认知层,还是建议更新L4核心层。

129 41
Explore
zephyrwang6/myskill

remotion-video

使用 Remotion 框架以编程方式创建视频。Remotion 让你用 React 组件定义视频内容,支持动画、字幕、音乐可视化、3D 视频、教程讲解视频等。适用于程序化视频、批量生成、数据驱动视频、音乐可视化、自动字幕等场景。

129 41
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results