🚀 快速安装

复制以下命令并运行,立即安装此 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:预检查(中文内容)

条件:仅当输入文件包含中文文本时才执行。

检测

  1. 读取输入的 markdown 文件
  2. 检查内容是否包含中日韩统一表意文字字符
  3. 如果不包含 CJK 内容 → 跳至步骤 1

格式建议

如果检测到 CJK 内容且 baoyu-format-markdown 技能可用:

使用 AskUserQuestion 询问是否先进行格式化。格式化可以修复:

  • 粗体标记内的标点符号导致 ** 解析失败的问题
  • 中日韩文字与英文之间的间距问题

如果用户同意:调用 baoyu-format-markdown 技能格式化文件,然后使用格式化后的文件作为输入。

如果用户拒绝:继续使用原始文件。

步骤 1:确定主题

主题解析顺序(第一个匹配项胜出):

  1. 用户明确指定的主题(CLI --theme 或对话中)
  2. EXTEND.md default_theme(此技能自身的 EXTEND.md,已在步骤 0 中检查)
  3. baoyu-post-to-wechat 的 EXTEND.md default_theme(跨技能回退)
  4. 如果未找到任何主题 → 使用 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 表格
图片 ![alt](src)
链接 [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 原始英文文档,方便对照翻译。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。