baoyu-markdown-to-html by jimliu/baoyu-skills
npx skills add https://github.com/jimliu/baoyu-skills --skill baoyu-markdown-to-html将 Markdown 文件转换为带内联 CSS 的精美 HTML,针对微信公众号等平台优化。
Agent 执行 : 确定此 SKILL.md 所在目录为 {baseDir}。解析 ${BUN_X} 运行时:如果已安装 bun → 使用 bun;如果 npx 可用 → 使用 npx -y bun;否则建议安装 bun。请将 {baseDir} 和 ${BUN_X} 替换为实际值。
| 脚本 | 用途 |
|---|
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
scripts/main.ts | 主入口点 |
检查 EXTEND.md 是否存在(优先级顺序):
# macOS, Linux, WSL, Git Bash
test -f .baoyu-skills/baoyu-markdown-to-html/EXTEND.md && echo "project"
test -f "${XDG_CONFIG_HOME:-$HOME/.config}/baoyu-skills/baoyu-markdown-to-html/EXTEND.md" && echo "xdg"
test -f "$HOME/.baoyu-skills/baoyu-markdown-to-html/EXTEND.md" && echo "user"
# PowerShell (Windows)
if (Test-Path .baoyu-skills/baoyu-markdown-to-html/EXTEND.md) { "project" }
$xdg = if ($env:XDG_CONFIG_HOME) { $env:XDG_CONFIG_HOME } else { "$HOME/.config" }
if (Test-Path "$xdg/baoyu-skills/baoyu-markdown-to-html/EXTEND.md") { "xdg" }
if (Test-Path "$HOME/.baoyu-skills/baoyu-markdown-to-html/EXTEND.md") { "user" }
┌──────────────────────────────────────────────────────────────┬───────────────────┐ │ 路径 │ 位置 │ ├──────────────────────────────────────────────────────────────┼───────────────────┤ │ .baoyu-skills/baoyu-markdown-to-html/EXTEND.md │ 项目目录 │ ├──────────────────────────────────────────────────────────────┼───────────────────┤ │ $HOME/.baoyu-skills/baoyu-markdown-to-html/EXTEND.md │ 用户主目录 │ └──────────────────────────────────────────────────────────────┴───────────────────┘
┌───────────┬───────────────────────────────────────────────────────────────────────────┐ │ 结果 │ 操作 │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ 找到 │ 读取、解析、应用设置 │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ 未找到 │ 使用默认值 │ └───────────┴───────────────────────────────────────────────────────────────────────────┘
EXTEND.md 支持 : 默认主题 | 自定义 CSS 变量 | 代码块样式
条件 : 仅当输入文件包含中文文本时执行。
检测 :
格式建议 :
如果检测到 CJK 内容且 baoyu-format-markdown 技能可用:
使用 AskUserQuestion 询问是否先进行格式化。格式化可以修复:
** 解析失败如果用户同意 : 调用 baoyu-format-markdown 技能格式化文件,然后使用格式化后的文件作为输入。
如果用户拒绝 : 继续使用原始文件。
主题解析顺序 (首次匹配成功即使用):
--theme 或对话中指定)default_theme(本技能自身的 EXTEND.md,在步骤 0 中检查)baoyu-post-to-wechat 的 EXTEND.md 中的 default_theme(跨技能回退)跨技能 EXTEND.md 检查 (仅当本技能的 EXTEND.md 没有 default_theme 时):
# 检查 baoyu-post-to-wechat 的 EXTEND.md 中的 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"
# PowerShell (Windows)
if (Test-Path "$HOME/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md") { Select-String -Pattern 'default_theme:.*' -Path "$HOME/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md" | ForEach-Object { $_.Matches.Value } }
如果主题从 EXTEND.md 解析得到 : 直接使用,不询问用户。
如果未找到默认主题 : 使用 AskUserQuestion 进行确认:
| 主题 | 描述 |
|---|---|
default (推荐) | 经典 - 传统布局,居中标题带底部边框,H2 为彩色背景上的白色文字 |
grace | 优雅 - 文字阴影,圆角卡片,精致的引用块 |
simple | 极简 - 现代简约风格,非对称圆角,干净的留白 |
modern | 现代 - 大圆角,药丸形标题,宽松的行高(搭配 --color red 可呈现传统红金风格) |
默认 : 关闭。默认不询问。
仅在用户明确要求 "微信外链转底部引用"、"底部引用"、"文末引用",或传递 --cite 参数时启用。
启用时的行为 :
引用链接 部分。https://mp.weixin.qq.com/... 链接保持为直接链接,不移到底部。${BUN_X} {baseDir}/scripts/main.ts <markdown_file> --theme <theme> [--cite]
显示 JSON 结果中的输出路径。如果创建了备份,请提及。
${BUN_X} {baseDir}/scripts/main.ts <markdown_file> [options]
选项:
| 选项 | 描述 | 默认值 |
|---|---|---|
--theme <name> | 主题名称 (default, grace, simple, modern) | default |
| `--color <name | hex>` | 主色调:预设名称或十六进制值 |
--font-family <name> | 字体:sans, serif, serif-cjk, mono 或 CSS 值 | 主题默认值 |
--font-size <N> | 字体大小:14px, 15px, 16px, 17px, 18px | 16px |
--title <title> | 覆盖 frontmatter 中的标题 | |
--cite | 将外部链接转换为底部引用,追加 引用链接 部分 | false (关闭) |
--keep-title | 保留内容中的第一个标题 | false (移除) |
--help | 显示帮助 |
颜色预设:
| 名称 | 十六进制 | 标签 |
|---|---|---|
| blue | #0F4C81 | 经典蓝 |
| green | #009874 | 翡翠绿 |
| vermilion | #FA5151 | 活力朱红 |
| yellow | #FECE00 | 柠檬黄 |
| purple | #92617E | 薰衣草紫 |
| sky | #55C9EA | 天空蓝 |
| rose | #B76E79 | 玫瑰金 |
| olive | #556B2F | 橄榄绿 |
| black | #333333 | 石墨黑 |
| gray | #A9A9A9 | 烟灰 |
| pink | #FFB7C5 | 樱花粉 |
| red | #A93226 | 中国红 |
| orange | #D97757 | 暖橙 (modern 主题默认) |
示例:
# 基本转换 (使用默认主题,移除第一个标题)
${BUN_X} {baseDir}/scripts/main.ts article.md
# 使用特定主题
${BUN_X} {baseDir}/scripts/main.ts article.md --theme grace
# 主题搭配自定义颜色
${BUN_X} {baseDir}/scripts/main.ts article.md --theme modern --color red
# 为普通外部链接启用底部引用
${BUN_X} {baseDir}/scripts/main.ts article.md --cite
# 保留内容中的第一个标题
${BUN_X} {baseDir}/scripts/main.ts article.md --keep-title
# 覆盖标题
${BUN_X} {baseDir}/scripts/main.ts article.md --title "我的文章"
文件位置 : 与输入的 markdown 文件相同目录。
/path/to/article.md/path/to/article.html冲突处理 : 如果 HTML 文件已存在,将首先进行备份:
/path/to/article.html.bak-YYYYMMDDHHMMSS标准输出 JSON 结果:
{
"title": "文章标题",
"author": "作者名称",
"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"
}
]
}
| 主题 | 描述 |
|---|---|
default | 经典 - 传统布局,居中标题带底部边框,H2 为彩色背景上的白色文字 |
grace | 优雅 - 文字阴影,圆角卡片,精致的引用块 (by @brzhang) |
simple | 极简 - 现代简约风格,非对称圆角,干净的留白 (by @okooo5km) |
modern | 现代 - 大圆角,药丸形标题,宽松的行高(搭配 --color red 可呈现传统红金风格) |
| 功能 | 语法 |
|---|---|
| 标题 | # H1 到 ###### H6 |
| 粗体/斜体 | **粗体**, *斜体* |
| 代码块 | ````语言` 带语法高亮 |
| 行内代码 | 代码 |
| 表格 | GitHub 风格的 markdown 表格 |
| 图片 |  |
| 链接 | [文本](url);添加 --cite 可将普通外部链接移至底部引用 |
| 引用块 | > 引用 |
| 列表 | - 无序列表, 1. 有序列表 |
| 提示框 | > [!NOTE], > [!WARNING], 等 |
| 脚注 | [^1] 引用 |
| 注音文本 | `{base |
| Mermaid | ````mermaid` 图表 |
| PlantUML | ````plantuml` 图表 |
支持 YAML frontmatter 用于元数据:
---
title: 文章标题
author: 作者名称
description: 文章摘要
---
如果未找到标题,则从第一个 H1/H2 标题提取或使用文件名。
通过 EXTEND.md 进行自定义配置。有关路径和支持的选项,请参阅 偏好设置 部分。
每周安装量
12.2K
代码仓库
GitHub Stars
11.8K
首次出现
Jan 29, 2026
安全审计
安装于
opencode10.0K
gemini-cli9.7K
codex9.7K
github-copilot9.4K
cursor9.3K
kimi-cli9.3K
Converts Markdown files to beautifully styled HTML with inline CSS, optimized for WeChat Official Account and other platforms.
Agent Execution : Determine this SKILL.md directory as {baseDir}. Resolve ${BUN_X} runtime: if bun installed → bun; if npx available → npx -y bun; else suggest installing bun. Replace {baseDir} and ${BUN_X} with actual values.
| Script | Purpose |
|---|---|
scripts/main.ts | Main entry point |
Check EXTEND.md existence (priority order):
# macOS, Linux, WSL, Git Bash
test -f .baoyu-skills/baoyu-markdown-to-html/EXTEND.md && echo "project"
test -f "${XDG_CONFIG_HOME:-$HOME/.config}/baoyu-skills/baoyu-markdown-to-html/EXTEND.md" && echo "xdg"
test -f "$HOME/.baoyu-skills/baoyu-markdown-to-html/EXTEND.md" && echo "user"
# PowerShell (Windows)
if (Test-Path .baoyu-skills/baoyu-markdown-to-html/EXTEND.md) { "project" }
$xdg = if ($env:XDG_CONFIG_HOME) { $env:XDG_CONFIG_HOME } else { "$HOME/.config" }
if (Test-Path "$xdg/baoyu-skills/baoyu-markdown-to-html/EXTEND.md") { "xdg" }
if (Test-Path "$HOME/.baoyu-skills/baoyu-markdown-to-html/EXTEND.md") { "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
Condition : Only execute if input file contains Chinese text.
Detection :
Format Suggestion :
If CJK content detected AND baoyu-format-markdown skill is available:
Use AskUserQuestion to ask whether to format first. Formatting can fix:
** parse failuresIf user agrees : Invoke baoyu-format-markdown skill to format the file, then use formatted file as input.
If user declines : Continue with original file.
Theme resolution order (first match wins):
--theme or conversation)default_theme (this skill's own EXTEND.md, checked in Step 0)baoyu-post-to-wechat EXTEND.md default_theme (cross-skill fallback)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"
# PowerShell (Windows)
if (Test-Path "$HOME/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md") { Select-String -Pattern 'default_theme:.*' -Path "$HOME/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md" | ForEach-Object { $_.Matches.Value } }
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) | Classic - traditional layout, centered title with bottom border, H2 with white text on colored background |
grace | Elegant - text shadow, rounded cards, refined blockquotes |
simple | Minimal - modern minimalist, asymmetric rounded corners, clean whitespace |
modern | Modern - large radius, pill-shaped titles, relaxed line height (pair with --color red for traditional red-gold style) |
Default : Off. Do not ask by default.
Enable only if the user explicitly asks for "微信外链转底部引用", "底部引用", "文末引用", or passes --cite.
Behavior when enabled :
引用链接 section.https://mp.weixin.qq.com/... links stay as direct links and are not moved to the bottom.${BUN_X} {baseDir}/scripts/main.ts <markdown_file> --theme <theme> [--cite]
Display the output path from JSON result. If backup was created, mention it.
${BUN_X} {baseDir}/scripts/main.ts <markdown_file> [options]
Options:
| Option | Description | Default |
|---|---|---|
--theme <name> | Theme name (default, grace, simple, modern) | default |
| `--color <name | hex>` | Primary color: preset name or hex value |
--font-family <name> | Font: sans, serif, serif-cjk, mono, or CSS value | theme default |
--font-size <N> | Font size: 14px, 15px, 16px, 17px, 18px | 16px |
--title <title> | Override title from frontmatter | |
Color Presets:
| Name | Hex | Label |
|---|---|---|
| blue | #0F4C81 | Classic Blue |
| green | #009874 | Emerald Green |
| vermilion | #FA5151 | Vibrant Vermilion |
| yellow | #FECE00 | Lemon Yellow |
| purple | #92617E | Lavender Purple |
| sky | #55C9EA | Sky Blue |
| rose | #B76E79 | Rose Gold |
| olive | #556B2F | Olive Green |
| black | #333333 | Graphite Black |
| gray | #A9A9A9 | Smoke Gray |
Examples:
# Basic conversion (uses default theme, removes first heading)
${BUN_X} {baseDir}/scripts/main.ts article.md
# With specific theme
${BUN_X} {baseDir}/scripts/main.ts article.md --theme grace
# Theme with custom color
${BUN_X} {baseDir}/scripts/main.ts article.md --theme modern --color red
# Enable bottom citations for ordinary external links
${BUN_X} {baseDir}/scripts/main.ts article.md --cite
# Keep the first heading in content
${BUN_X} {baseDir}/scripts/main.ts article.md --keep-title
# Override title
${BUN_X} {baseDir}/scripts/main.ts article.md --title "My Article"
File location : Same directory as input markdown file.
/path/to/article.md/path/to/article.htmlConflict handling : If HTML file already exists, it will be backed up first:
/path/to/article.html.bak-YYYYMMDDHHMMSSJSON 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"
}
]
}
| Theme | Description |
|---|---|
default | Classic - traditional layout, centered title with bottom border, H2 with white text on colored background |
grace | Elegant - text shadow, rounded cards, refined blockquotes (by @brzhang) |
simple | Minimal - modern minimalist, asymmetric rounded corners, clean whitespace (by @okooo5km) |
modern | Modern - large radius, pill-shaped titles, relaxed line height (pair with --color red for traditional red-gold style) |
| 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 |
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.
Custom configurations via EXTEND.md. See Preferences section for paths and supported options.
Weekly Installs
12.2K
Repository
GitHub Stars
11.8K
First Seen
Jan 29, 2026
Security Audits
Gen Agent Trust HubWarnSocketPassSnykPass
Installed on
opencode10.0K
gemini-cli9.7K
codex9.7K
github-copilot9.4K
cursor9.3K
kimi-cli9.3K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
--citeConvert external links to bottom citations, append 引用链接 section |
| false (off) |
--keep-title | Keep the first heading in content | false (removed) |
--help | Show help |
| pink | #FFB7C5 | Sakura Pink |
| red | #A93226 | China Red |
| orange | #D97757 | Warm Orange (modern default) |
[text](url); add --cite to move ordinary external links into bottom references |
| Blockquotes | > quote |
| Lists | - unordered, 1. ordered |
| Alerts | > [!NOTE], > [!WARNING], etc. |
| Footnotes | [^1] references |
| Ruby text | `{base |
| Mermaid | ````mermaid` diagrams |
| PlantUML | ````plantuml` diagrams |