把 Markdown 一键排成可直接粘进公众号编辑器的精致 HTML —— 6 套精选主题 + 主题生成器 + 双关卡校验。

一、项目背景与痛点

微信公众号的编辑器一直以「难用」著称。无论是排版混乱的富文本工具栏、对代码块和数学公式的零支持，还是不同手机型号下样式走样的问题，都让内容创作者苦不堪言。许多技术博主、产品运营和知识付费作者不得不手动调整每一段的字号、行距、颜色，甚至使用第三方排版工具（如 135 编辑器、秀米）先排版再复制，但这类工具通常需要登录、模板收费、输出代码冗余且不兼容 Markdown 语法。

对于习惯用 Markdown 写作的用户（尤其是程序员和技术写作者）来说，他们需要一种「写时用 Markdown，发布时自动转为公众号友好 HTML」的解决方案。目前市面上虽有少数工具能做到 Markdown 转 HTML，但要么样式简陋（仅保留基本结构），要么主题固定不可定制，且缺乏对公众号编辑器特有的兼容性处理（如字体大小、行间距、代码高亮、图片居中、引用样式等）。

gzh-design-skill 正是为解决这一痛点而生。它是一个基于 HTML/CSS/JavaScript 的轻量级 AI-agent skill，接收 Markdown 输入后，输出可直接粘贴到公众号编辑器中的精致 HTML，内置 6 套精选主题，并支持用户自定义主题生成器，同时通过双关卡校验确保输出内容在微信生态内的兼容性。

二、快速上手：安装与使用

2.1 环境要求

• 任意现代浏览器（Chrome、Edge、Safari、Firefox）
• 无需 Node.js、无需安装任何依赖

2.2 安装步骤

1. 克隆仓库：
   bash
   git clone https://github.com/isjiamu/gzh-design-skill.git

2. 进入目录：
   bash
   cd gzh-design-skill

3. 直接打开 index.html（或使用 VS Code 的 Live Server 插件启动本地服务器，以避免跨域问题）

如果你不想克隆，也可以直接访问项目的 GitHub Pages 在线演示（通常在仓库 Settings > Pages 中开启）。

2.3 使用示例

假设你有一篇 Markdown 文章 example.md，内容如下：
markdown

标题：如何用 Python 进行数据分析

一、安装 Pandas

python
import pandas as pd

引用：数据科学是未来的趋势。

• 第一步：安装
• 第二步：导入

方法	说明
read_csv	读取 CSV 文件
head()	查看前五行

操作步骤：

1. 在浏览器中打开 index.html
2. 将上述 Markdown 内容粘贴到左侧编辑区
3. 在右侧预览区选择主题（如「极简风」或「科技蓝」）
4. 点击「生成 HTML」按钮
5. 复制生成的 HTML 代码，粘贴到公众号编辑器（建议使用「粘贴为纯文本」后再粘贴 HTML，或直接使用公众号的「HTML 模式」）

输出效果（部分）：

• 标题自动适配字号（h1 为 22px，h2 为 18px，符合公众号规范）
• 代码块使用 background-color: #f5f5f5; border-radius: 4px; 样式，并保留语法高亮
• 引用块左侧有 4px 深色竖线，字体颜色为 #666
• 表格带有交替行背景色，便于阅读
• 图片自动居中并添加圆角

三、核心亮点深度解析

3.1 六套精选主题，覆盖主流审美

项目内置以下主题：

1. 极简风：白底黑字，最小干扰，适合长文阅读
2. 科技蓝：蓝色主色调，适合技术教程、产品介绍
3. 暖阳橙：暖色系，适合情感类、生活类文章
4. 清新绿：低饱和度绿色，适合健康、环保主题
5. 深夜灰：深色背景，适合夜间阅读或高端品牌
6. 复古黄：仿纸质书质感，适合文化、历史类内容

每个主题不仅修改了颜色和字体，还调整了间距、边框、阴影等细节，确保整体视觉统一。

3.2 主题生成器：自定义你的专属样式

对于有品牌要求的用户，项目提供了一个「主题生成器」界面，允许你实时调整：

• 正文字体、标题字体（支持微信内置字体如 PingFang SC、Microsoft YaHei）
• 主色、背景色、文字颜色
• 代码块样式（背景色、边框、高亮配色）
• 引用块样式（左侧竖线颜色、背景色）
• 表格样式（表头颜色、交替行颜色、边框粗细）
• 图片样式（圆角、阴影、最大宽度）
• 整体间距（段落间距、标题上下间距）

调整后可以导出为 JSON 主题配置文件，供后续复用或分享给团队。

3.3 双关卡校验：确保兼容性

这是项目最独特的技术亮点。第一关是语法校验：检查 Markdown 输入中的常见错误，如未闭合的代码块、不正确的表格分隔符、嵌套过深的列表等，并在编辑器内高亮提示。第二关是样式兼容性校验：输出 HTML 后，工具会自动模拟微信编辑器对样式的过滤规则，检测可能被微信客户端丢弃的 CSS 属性（如 box-shadow 在某些版本中会被移除），并给出替代建议或自动降级。

例如，如果用户选择的主题中包含 text-shadow，工具会警告该属性在微信 iOS 版中可能被忽略，并建议改用 font-weight 或颜色对比度来达到类似效果。

3.4 零依赖、纯前端、可离线使用

整个项目仅依赖一个 HTML 文件 + 少量 CSS/JS，无需后端服务、无需 API 密钥、无需网络连接。所有转换逻辑在浏览器本地完成，不向任何服务器发送数据，保证了内容安全性，适合企业内网或保密场景。

四、适用场景

1. 技术博客转公众号：程序员写完技术文章后，一键转为公众号可用的格式，保留代码高亮和表格。
2. 企业新媒体运营：团队使用 Markdown 协作写稿，统一输出风格一致的公众号文章，减少排版时间。
3. 知识付费课程：将课程讲义（Markdown 格式）转换为美观的公众号推文，提升学员阅读体验。
4. 个人知识管理：在 Obsidian、Notion 等工具中撰写笔记，导出 Markdown 后快速排版发布。
5. 品牌内容定制：通过主题生成器为不同品牌创建专属模板，保持视觉一致性。

五、同类项目对比

特性	gzh-design-skill	Md2WeChat	WeChat-Format	135编辑器/秀米
开源免费	✅ 完全开源	✅ 开源	✅ 开源	❌ 部分付费
离线使用	✅ 是	❌ 需网络	❌ 需网络	❌ 需网络
主题数量	6套 + 可自定义	3套	1套	50+套（但大多付费）
代码高亮	✅ 支持	✅ 支持	❌ 不支持	❌ 需手动添加
表格美化	✅ 交替行+圆角	✅ 基本样式	❌ 无美化	✅ 但模板复杂
主题生成器	✅ 有	❌ 无	❌ 无	❌ 需使用付费版
兼容性校验	✅ 双关卡	❌ 无	❌ 无	❌ 无
图片处理	✅ 居中+圆角	❌ 无	❌ 无	✅ 但需上传

优势总结：

• 相比 Md2WeChat，gzh-design-skill 多了主题生成器和兼容性校验。
• 相比 WeChat-Format，它支持代码高亮和表格美化。
• 相比 135/秀米，它完全免费、离线可用、无广告、输出代码干净。

不足：

• 目前不支持直接上传图片到微信图床（需要手动上传）。
• 对复杂 Markdown 语法（如脚注、定义列表）的支持有限。
• 主题生成器目前仅支持基础样式调整，不支持自定义 CSS 注入。

六、技术架构与扩展性

项目基于纯前端技术栈：

• Markdown 解析：使用 marked.js（或自定义解析器）将 Markdown 转为 AST
• 样式注入：根据所选主题的 CSS 变量，动态生成内联样式（避免使用 class，因为微信编辑器会清除 <style> 标签中的类选择器）
• 预览渲染：在右侧 iframe 中展示效果，保证样式隔离
• 主题持久化：使用 localStorage 存储用户自定义主题

扩展方向：

• 支持更多 Markdown 扩展语法（如数学公式 KaTeX、流程图 mermaid）
• 提供 CLI 版本，方便 CI/CD 流水线集成
• 增加图片自动上传至微信图床的功能（需接入微信开放平台 API）
• 开放插件系统，允许社区贡献主题

七、总结与推荐

gzh-design-skill 是一款专注于「Markdown → 公众号 HTML」转换的精悍工具。它的核心价值在于：用最少的操作成本，获得专业级的排版效果。6 套精心设计的主题覆盖了绝大多数使用场景，主题生成器满足了品牌定制需求，双关卡校验则体现了对微信生态兼容性的深度理解。

如果你是一名经常在公众号发文的技术写作者、运营或内容创作者，这个项目值得你立即克隆使用。它不仅节省了你每周数小时的排版时间，更让你能专注于内容本身。

项目链接：https://github.com/isjiamu/gzh-design-skill