🚀 快速安装
复制以下命令并运行,立即安装此 Skill:
npx @anthropic-ai/skills install jimliu/baoyu-skills/baoyu-markdown-to-html
💡 提示:需要 Node.js 和 NPM
Markdown 转 HTML 转换器
将 Markdown 文件转换为带有内联 CSS 的漂亮 HTML,针对微信公众号和其他平台进行了优化。
脚本目录
代理执行:将此 SKILL.md 目录确定为 {baseDir}。解析 ${BUN_X} 运行时:如果安装了 bun → 使用 bun;如果 npx 可用 → 使用 npx -y bun;否则建议安装 bun。用实际值替换 {baseDir} 和 ${BUN_X}。
| 脚本 | 用途 |
|---|---|
scripts/main.ts |
主入口点 |
首选项 (EXTEND.md)
检查 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 变量 | 代码块样式
工作流程
步骤 0:预检查(中文内容)
条件:仅当输入文件包含中文文本时才执行。
检测:
- 读取输入的 markdown 文件
- 检查内容是否包含中日韩统一表意文字字符
- 如果不包含 CJK 内容 → 跳至步骤 1
格式建议:
如果检测到 CJK 内容且 baoyu-format-markdown 技能可用:
使用 AskUserQuestion 询问是否先进行格式化。格式化可以修复:
- 粗体标记内的标点符号导致
**解析失败的问题 - 中日韩文字与英文之间的间距问题
如果用户同意:调用 baoyu-format-markdown 技能格式化文件,然后使用格式化后的文件作为输入。
如果用户拒绝:继续使用原始文件。
步骤 1:确定主题
主题解析顺序(第一个匹配项胜出):
- 用户明确指定的主题(CLI
--theme或对话中) - EXTEND.md
default_theme(此技能自身的 EXTEND.md,已在步骤 0 中检查) baoyu-post-to-wechat的 EXTEND.mddefault_theme(跨技能回退)- 如果未找到任何主题 → 使用 AskUserQuestion 确认
跨技能 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 搭配使用可获得传统的红金风格) |
步骤 1.5:确定引用模式
默认:关闭。默认不询问。
仅在用户明确要求“微信外链转底部引用”、“底部引用”、“文末引用”或传递了 --cite 参数时启用。
启用时的行为:
- 普通外部链接将以带编号的上标形式呈现,并收集在最后的
引用链接部分。 https://mp.weixin.qq.com/...链接保持为直接链接,不会被移动到底部。- 链接文本等于 URL 的裸链接保持在行内。
步骤 2:转换
${BUN_X} {baseDir}/scripts/main.ts <markdown_file> --theme <theme> [--cite]
步骤 3:报告结果
显示来自 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 | 暖橙色(现代主题默认) |
示例:
# 基本转换(使用默认主题,移除第一个标题)
${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 |
优雅 – 文字阴影、圆角卡片、精致的引用块(由 @brzhang 贡献) |
simple |
简约 – 现代极简风格,非对称圆角,干净的留白(由 @okooo5km 贡献) |
modern |
现代 – 大圆角、胶囊形标题、宽松的行高(与 --color red 搭配使用可获得传统的红金风格) |
支持的 Markdown 特性
| 特性 | 语法 |
|---|---|
| 标题 | # H1 到 ###### H6 |
| 粗体/斜体 | **粗体**, *斜体* |
| 代码块 | ```lang 带语法高亮 |
| 行内代码 | `code` |
| 表格 | GitHub 风格的 Markdown 表格 |
| 图片 |  |
| 链接 | [text](url);添加 --cite 可将普通外部链接移入底部参考文献 |
| 引用块 | > quote |
| 列表 | - 无序,1. 有序 |
| 警报 | > [!NOTE],> [!WARNING] 等 |
| 脚注 | [^1] 引用 |
| 注音文本 | {基盘 | }(原文此处不完整,保留原样) |
| Mermaid | ```mermaid 图表 |
| PlantUML | ```plantuml 图表 |
前置元数据
支持 YAML 前置元数据以存储元信息:
---
title: 文章标题
author: 作者姓名
description: 文章摘要
---
如果未找到标题,则从第一个 H1/H2 标题提取或使用文件名。
扩展支持
通过 EXTEND.md 进行自定义配置。有关路径和支持的选项,请参阅首选项部分。
📄 原始文档
完整文档(英文):
https://skills.sh/jimliu/baoyu-skills/baoyu-markdown-to-html
💡 提示:点击上方链接查看 skills.sh 原始英文文档,方便对照翻译。

评论(0)