canghe-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.
1实现原理 · 为什么它能做到
提示词编排 + 单脚本执行:SKILL.md 让 agent 把自身目录当作 SKILL_DIR,实际转换交给一个 Bun/TypeScript 脚本 scripts/main.ts。
**Agent Execution**: Determine this SKILL.md directory as `SKILL_DIR`, then use `${SKILL_DIR}/scripts/<name>.ts`.
转换命令以 npx -y bun 即时执行本地脚本,并支持 --theme / --title / --keep-title 等选项。
npx -y bun ${SKILL_DIR}/scripts/main.ts <markdown_file> --theme <theme>
实现栈由依赖清单暴露:marked 解析、highlight.js 高亮、juice 内联 CSS、front-matter 读元数据。
"juice": "^11.0.1", "marked": "^15.0.6", "reading-time": "^1.5.0",
主题靠 CSS 变量 + 主题文件实现,default 主题定义各级标题、引用、代码块、表格等排版(如二级标题白字彩底居中)。
h2 { display: table; padding: 0 0.2em; margin: 4em auto 2em; color: #fff; background: var(--md-primary-color);
偏好外置三级机制:项目级 .canghe-skills/... 优先,其次 $HOME/.canghe-skills/...,支持默认主题、自定义 CSS 变量、代码块样式。
**EXTEND.md Supports**: Default theme | Custom CSS variables | Code block style
输出与冲突处理:HTML 与输入同目录,若已存在先备份为 .bak-YYYYMMDDHHMMSS,并向 stdout 打印含图片占位符的 JSON 供下游替换。
**Conflict handling**: If HTML file already exists, it will be backed up first:
中文前置处理:仅当输入含 CJK 时,若检测到 canghe-format-markdown 可用则询问是否先格式化(修复 ** 被标点破坏等)。
**Condition**: Only execute if input file contains Chinese text.
可选 PlantUML 渲染把图表源码发往公共服务器(默认 www.plantuml.com),是唯一的执行期外发路径。
* @default 'https://www.plantuml.com/plantuml'
2核心能力
3外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| cli | bun(经 npx -y 即时拉取) |
| api | PlantUML 公共渲染服务(图表源码外发) |
| package | marked(Markdown 解析) |
| package | juice(CSS 内联化) |
4管控建议与判定依据
- scripts/: 执行本地脚本或命令: npx -y bun ${SKILL_DIR}/scripts/main.ts <markdown_file> --theme <theme>(age
- 网络端点: 声明外部网络访问: PlantUML 渲染:对 https://www.plantuml.com/plantuml 发 GET 取 SVG(图表源码外发),仅当文档含 p
- 本地工作目录: 文件读写与工件输出: 与输入同目录写 <name>.html(覆盖前备份为 .bak-YYYYMMDDHHMMSS)
5第二遍独立确认
- [ok] 实现原理(SKILL.md 编排 + main.ts 执行) — SKILL.md 的 Script Directory/Workflow 段落自证 agent 只做路由,转换由 scripts/main.ts 承担;执行命令逐字可核。
- [ok] PlantUML 执行期外发 — plantuml.ts 的 @default 端点与风险扫描 plantuml.ts:193 的 fetch(svgUrl) 相互印证,判橙据成立。
- [ok] 三套主题存在性 — §1 清单与 §2 内文均含 themes/default.css、grace.css、simple.css,主题描述与 SKILL.md 一致。
- [ok] 依赖栈 — package.json 列出 marked/highlight.js/juice/front-matter/remark-cjk-friendly 等,与实现原理相符。
- [ok] 是否存在凭证读取 — 「凭证/环境变量」65 条命中均为 ${SKILL_DIR}/$HOME 路径或示例占位,未发现密钥/cookie 读取,判定为无。
- [unlocatable] main.ts / render.ts 写盘细节 — bundle 只列清单未展开这两份正文,写盘/备份行为以 SKILL.md 描述与扫描行(main.ts:244、render.ts:868)为据,未代码级复核。
- [ok] URL 命中性质 — 193 条 URL 命中绝大多数为注释/文档链接与 highlight.js 语言名;真实执行期网络仅 plantuml fetch,未发现被夸大的外发。
- [ok] 跨 skill 调用 canghe-format-markdown — SKILL.md Step 0 明写条件式调用,属他人 skill 行为,按范式不参与本 skill 判级。
6结论
1c1036babb2494ed…