将 Markdown 转换为微信兼容的样式化 HTML,支持代码高亮、数学公式、PlantUML、脚注、提示框、信息图以及可选机器人...
标记下到 HTML 转换器是一项面向实际任务的技能,主要用于将 Markdown 文件转换为带有内置 CSS 的 HTML 的美丽风格, 优化为 WeChat Official 账户和其他平台;. 用户输入工具;
该技能适合需要稳定复用相关能力的场景,可作为自动化工作流的一部分,也便于后续检查、调整和扩展。从功能定位来看,该技能强调把分散的操作要求整理成清晰、可复用的处理流程,使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数,再依据技能说明逐步执行;
若输入条件不完整,应先补齐信息或采用保守配置,避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期,并对异常提示、缺失字段和边界情况进行处理;涉及批量任务时,还应保存进度,避免中断后重复操作。
将 Markdown 文件转换为带有内联 CSS 的精美 HTML,专为微信公众号及其他平台优化。
当本技能向用户发起提示时,请按以下工具选择规则(优先级从高到低)执行:
AskUserQuestion、request_user_input、clarify、ask_user 或任何等效工具。下方具体出现的 AskUserQuestion 引用仅为示例 — 在其他运行时中请替换为本地等效工具。
Agent 执行上下文:将本 SKILL.md 所在目录确定为 {baseDir}。解析 ${BUN_X} 运行时:若已安装 bun → 使用 bun;若存在 npx → 使用 npx -y bun;否则建议安装 bun。请将 {baseDir} 和 ${BUN_X} 替换为实际值。
| 脚本 | 用途 |
|---|---|
scripts/main.ts |
主入口文件 |
按以下优先级顺序查找 EXTEND.md 文件 — 首个匹配项生效:
| 优先级 | 路径 | 作用域 |
|---|---|---|
| 1 | .baoyu-skills/baoyu-markdown-to-html/EXTEND.md |
项目级 |
| 2 | ${XDG_CONFIG_HOME:-$HOME/.config}/baoyu-skills/baoyu-markdown-to-html/EXTEND.md |
XDG 配置目录 |
| 3 | $HOME/.baoyu-skills/baoyu-markdown-to-html/EXTEND.md |
用户主目录 |
若均未找到,则使用默认配置。
EXTEND.md 支持配置项包括:默认主题、自定义 CSS 变量、代码块样式。
执行条件:仅当输入文件包含中文文本时才执行本步骤。
检测方式:
格式化建议:
若检测到 CJK 内容 且 baoyu-format-markdown 技能可用:
使用 AskUserQuestion 向用户确认是否先执行格式化。格式化可修复以下问题:
** 解析失败若用户同意:调用 baoyu-format-markdown 技能对文件进行格式化,并以格式化后的文件作为后续输入。
若用户拒绝:继续使用原始文件。
主题解析顺序(首个匹配项生效):
--theme 参数或对话)default_theme(已在步骤 0 中检查)baoyu-post-to-wechat 的 EXTEND.md 中定义的 default_theme(跨技能回退)AskUserQuestion 向用户确认跨技能 EXTEND.md 检查(仅当本技能的 EXTEND.md 中未定义 default_theme 时触发):
若 $HOME/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md 存在,则读取该文件并查找 default_theme: 行。若存在则采用其值;否则继续降级。
若主题由 EXTEND.md 解析得出:直接采用,不得再向用户询问。
若未找到任何默认主题:使用 AskUserQuestion 让用户从下方「主题列表」中确认一个主题。
默认状态:关闭。默认不主动询问用户。
仅当用户明确要求时启用:例如提出“微信外链转底部引用”、“底部引用”、“文末引用”,或传入 --cite 参数。
启用后的行为:
引用链接 区域。https://mp.weixin.qq.com/... 类链接保持直连形式,不移至文末。${BUN_X} {baseDir}/scripts/main.ts --theme [--cite]
显示 JSON 输出中的 htmlPath 路径。若生成了备份文件,需一并说明。
${BUN_X} {baseDir}/scripts/main.ts [options]
选项说明:
| 选项 | 说明 | 默认值 |
|---|---|---|
--theme |
主题名称(可选:default、grace、simple、modern) |
default |
--color |
主色调:预设名称或十六进制颜色值 | 主题默认值 |
--font-family |
字体:可选 sans、serif、serif-cjk、mono 或任意 CSS 字体值 |
主题默认值 |
--font-size |
字号:支持 14px、15px、16px、17px、18px |
16px |
--title |
覆盖 frontmatter 中的标题字段 | (空) |
--cite |
将普通外部链接转换为文末引用,并追加 引用链接 区域 |
false(关闭) |
--keep-title |
保留正文中第一个标题(H1/H2) | 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 |
| 加粗 / 斜体 | **bold**、*italic* |
| 代码块 | ```lang(支持语法高亮) |
| 行内代码 | `code` |
| 表格 | GitHub 风格 Markdown 表格 |
| 图片 |  |
| 链接 | [text](url);添加 --cite 可将普通外部链接移至文末引用区 |
| 引用块 | > quote |
| 列表 | -(无序)、1.(有序) |
| 提示框(Alerts) | > [!NOTE]、> [!WARNING] 等 |
| 脚注 | [^1] 引用语法 |
| Ruby 注音 | {base |
| Mermaid 图表 | ```mermaid 图表 |
| PlantUML 图表 | ```plantuml 图表 |
支持 YAML 格式 frontmatter 用于元数据声明:
---
title: 文章标题
author: 作者名
description: 文章摘要
---
若未在 frontmatter 中定义 title,则尝试从首个 H1/H2 标题中提取;若仍无,则使用文件名。
通过 EXTEND.md 提供自定义配置。详见 偏好设置 章节中关于路径及支持选项的说明。