微信公众号排版:把 Markdown 转成可粘贴的公众号 HTML

前言

公众号后台对 HTML 和 CSS 限制多:外链样式表、脚本、多数布局属性都不能用,复制普通网页片段进去经常错位。很多人用 Markdown 写稿,再手工改样式或套模板,摘要和代码块还要单独处理。

下面介绍 SkillHub 上的 Agent Skill「微信公众号排版」:在对话里把 Markdown 转成带内联样式的公众号兼容 HTML,并生成摘要与文末互动引导,减少重复排版工作。

这是什么

「微信公众号排版」(slug:wechat-formatting,当前版本 v1.0.0)是社区发布的 Agent Skill,遵循通用 SKILL.md 格式。发布者显示为 STAND-ALONE,SkillHub 上的标识为 @indiv-stand-alone/wechat-formatting,与发布者 handle user_4cc07111 对应。

Skill 的定位是:将 Markdown 转为微信公众号后台可接受的 HTML,自动生成摘要、注入内联样式,并处理代码块、提示块、警告块与微信官方音乐组件。

在 SkillHub 分类为 content-creation(子类「文章写作」)。截至核对时,公开统计为下载约 1820 次、1 个 star;无需 API Key。

说明:任务线索中的地址 https://api.skillhub.cn/user_4cc07111/wechat-formatting 在浏览器中无法打开详情页;可访问的 Skill 页为 https://skillhub.cn/skills/indiv-stand-alone/wechat-formatting。

核心功能

以下能力来自 Skill 包内 SKILL.md 与 SkillHub API 摘要,均已核对。

  1. Markdown → 公众号 HTML:解析标题、段落、引用、粗斜体、行内代码、代码块、分隔线等,并套用默认内联样式。
  2. 自动生成摘要:约 35–120 字,结构为「情绪钩子 + 核心内容 + 价值承诺」;输出包在 WECHAT SUMMARY 注释块中。
  3. 样式与合规:禁止 <style>、<script>、class、id 及 flex/grid 等黑名单 CSS;样式一律内联;代码高亮用带 color 的 <span>。
  4. 扩展块:支持 ::: tip、::: warning 容器,以及 ::: music 微信官方音乐组件(mpvoice / mpmusic,不用 <audio>)。
  5. 图片与清洗:普通图片仅接受 mmbiz.qpic.cn 域名;非合规图片改为提示段落;输出前做标签与属性清洗。
  6. 文末互动:按文章类型(教程、观点、叙事等)生成轻量互动问题,追加到 HTML 末尾。
  7. 固定输出格式:只输出摘要块与 HTML 块,不附带解释性文字。

安装与启用

方式一:SkillHub CLI

先确认已安装 skillhub(安装说明见 https://skillhub.cn/install/skillhub.md)。安装时必须用 --dir 指向当前 Agent 的 skills 目录,否则默认落在 ./skills/ 可能不会被识别。

skillhub install wechat-formatting --namespace indiv-stand-alone --dir ~/.cursor/skills/

常见 skills 目录(摘自 SkillHub 安装文档):

  • Cursor:~/.cursor/skills/
  • Claude Code:~/.claude/skills/
  • Codex:~/.codex/skills/ 或项目下的 .agents/skills/

安装完成后按你所用客户端要求重启或刷新 Agent,使 Skill 被加载。

方式二:让 AI 按官方提示安装

在 SkillHub 技能页可复制安装提示词,大意如下:

请根据 https://skillhub.cn/install/skillhub.md,安装 `@indiv-stand-alone/wechat-formatting`。

典型用法

启用 Skill 后,用自然语言说明要把 Markdown 转成公众号 HTML即可。官方 SKILL.md 中的示例如下。

用户输入:

帮我把下面这篇 Markdown 转成公众号 HTML:

# 标题

正文内容……

Agent 应仅输出以下结构(中间为实际摘要与 HTML),不解释转换过程:

<!-- START: WECHAT SUMMARY -->
[这里是自动生成的文章摘要]
<!-- END: WECHAT SUMMARY -->

<!-- START: WECHAT HTML -->
[这里是转换后的 HTML 代码]
<!-- END: WECHAT HTML -->

将 WECHAT HTML 区块内的内容复制到微信公众号后台正文编辑器;摘要区块用于填写群发摘要或自定义分享文案。

自定义语法(tip / warning / music)的写法见 Skill 包内 references/custom-syntax.md;默认样式与清洗规则见同目录下 references/style-rules.md、references/sanitize-rules.md。

适用场景与注意

适合谁

  • 用 Markdown 写公众号长文,希望一次得到可粘贴 HTML 的创作者或运营。
  • 需要在正文里保留代码块、提示/警告框或微信音乐组件的技术类、教程类文章。
  • 在 Cursor、Claude Code、Codex 等支持 Skills 的环境里排版,而不是单独跑本地转换脚本。

限制与注意

  • 外链或非 mmbiz.qpic.cn 的图片不会直接输出 <img>,需先在微信素材库上传再替换地址。
  • 列表、表格会优先用段落或卡片式结构,避免复杂表格在后台失真。
  • Skill 约束 Agent 行为,不保证与微信后台未来规则变更完全同步;发布前仍建议在后台预览一遍。
  • 线索中的 SkillHub 页面评分 99643 未在公开 API 字段中核对到,本文不写入该数字。

结尾

「微信公众号排版」把公众号常见的 HTML 白名单、内联样式和输出格式写进 Skill,适合在 Agent 对话里从 Markdown 直接落到可粘贴的正文与摘要。安装与详情见 SkillHub:

  • 技能页:https://skillhub.cn/skills/indiv-stand-alone/wechat-formatting
  • 线索中的 API 路径:https://api.skillhub.cn/user_4cc07111/wechat-formatting
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye