微信公众号文章排版工具
功能概述
提供 5 套精心设计的主题配色方案，将 Markdown 文章转换为带内联样式的 HTML 代码，可直接粘贴到微信公众号编辑器中渲染。
5 套主题配色
| 主题 | 风格定位 | 主色 | 适用场景 |
|---|---|---|---|
| 简约清新 | Teal · 自然 · 轻盈 | #2DBE9C | 生活类、科技类、个人博客 |
| 商务专业 | Navy · 严谨 · 权威 | #2C5AA0 | 企业号、行业报告、知识科普 |
| 文艺优雅 | Warm · 雅致 · 温暖 | #8B6F47 | 文化类、情感类、读书类 |
| 活力活泼 | Orange · 热情 · 灵动 | #FF6B35 | 营销活动、美食、年轻向 |
| 暗色高级 | Gold · 质感 · 深邃 | #D4AF37 | 高端品牌、摄影、设计类 |
支持的排版元素
- 文章标题 (H1)、章节标题 (H2/H3)
- 正文段落（可调字号和行高）
- 引用块（各主题独立设计）
- 图片及图片说明文字
- 有序/无序列表
- 加粗、斜体、行内代码
- 代码块
- 分割线
- 超链接
使用方法
方式一：直接在对话中生成 HTML（推荐）
用户在对话中提供 Markdown 文章内容并指定主题名称，直接生成带内联样式的 HTML 代码。
工作流程：
- 读取
references/styles.md获取指定主题的完整内联样式表 - 将用户提供的 Markdown 内容逐元素转换为 HTML 标签
- 对每个 HTML 元素套用对应主题的内联样式（从 styles.md 查表）
- 用
<section>标签包裹整体内容，应用容器样式 - 输出最终 HTML 代码，用户可直接复制粘贴到公众号编辑器
转换规则：
- # 标题 → <h1 style="...">标题</h1>
- ## 标题 → <h2 style="...">标题</h2>
- ### 标题 → <h3 style="...">标题</h3>
- 普通段落 → <p style="...">段落文字</p>
- > 引用 → <blockquote style="...">引用文字</blockquote>
- - 项 → <ul style="..."><li style="...">项</li></ul>
- 1. 项 → <ol style="..."><li style="...">项</li></ol>
- **粗体** → <strong style="...">粗体</strong>
- *斜体* → <em style="...">斜体</em>
- `代码` → <code style="...">代码</code>
- ```lang 代码``` → <pre style="..."><code style="...">代码</code></pre>
- [链接](url) → <a href="url" style="...">链接</a>
-  → <img src="url" style="...">
- 图片后 *说明* → <p style="caption样式">说明</p>
- --- → <hr style="...">
暗色/文艺主题特殊处理：
- 暗色高级：外层 <section> 需设置 background:#1E1E1E;padding:28px 20px;border-radius:8px;
- 文艺优雅：外层 <section> 需设置 background:#FFFBF7;padding:28px 20px;border-radius:8px;
- 其他主题：外层 <section> 设置 padding:0 16px;max-width:100%;box-sizing:border-box;
字号/行高调整：
- 默认字号 15px、行高 1.8
- 如用户指定，替换 p 样式中的 font-size 和 line-height 值
方式二：在浏览器中打开可视化工具
直接在浏览器中打开 assets/index.html 文件，使用可视化界面：
- 在左侧 Markdown 编辑器中编写或粘贴文章内容
- 点击顶部 5 个主题卡片之一选择配色
- 右侧手机预览区实时查看排版效果
- 点击「复制 HTML」按钮，将代码复制到剪贴板
- 打开微信公众号编辑器，切换到 HTML 源码模式，粘贴代码
open assets/index.html
参考文件
references/styles.md— 5 套主题的完整内联 CSS 样式速查表（方式一核心依赖）references/theme-guide.md— 5 套主题配色详细文档（色值表 + 设计特点）
微信公众号兼容性说明
- 所有样式均为内联样式（inline style），不依赖外部 CSS 或 class 名，确保在公众号编辑器中正常渲染
- 使用
<section>标签作为容器，兼容性最佳 - 字号使用
px单位，颜色使用hex格式 - 暗色主题和文艺主题使用
<section>包裹背景色，在白色页面中呈现为色块卡片 - 图片设置为
max-width:100%+display:block，确保自适应手机屏幕宽度 - 不支持 flexbox、grid、外部 CSS、class 选择器、
@media媒体查询
注意事项
- 方式一（直接生成）不依赖外部工具，在对话中即可完成
- 方式二（可视化工具）依赖 CDN 加载 marked.js，需要网络连接
- 编辑器内容自动保存到 localStorage，刷新页面不丢失
- 支持 Ctrl/Cmd+B 加粗、Ctrl/Cmd+I 斜体快捷键
