把「写文章」和「调排版」分开。你负责写，我来负责好看。
在线用：https://yishu5.github.io/GZHcomposing
本地用：下载 → 双击 index.html → 开写。不需要装任何东西。
写公众号最烦的两件事：
- 文章写完了，排版排到半夜
- 排好了，复制到公众号 —— 格式全乱
这个工具就是干这件事的：左边写，右边看效果，一键复制到公众号，完事。
| 步骤 | 做什么 | 在哪 |
|---|---|---|
| 1 | 把你的草稿粘过来 | 左边编辑区 |
| 2 | 点一下「排版模式」，挑一个喜欢的风格 | 顶部工具栏 |
| 3 | 确认右边预览效果 OK | 右边预览区 |
| 4 | 点底部蓝色按钮 | 「一键复制到公众号」 |
| 5 | 去公众号后台 Ctrl+V | 公众号编辑器 |
——就这么简单。不需要注册，不需要联网，数据全在浏览器里。
- Markdown 直接写（
# 标题、**加粗**、> 引用）——自动识别 - 纯文本也能用：「预处理」按钮，帮你把一坨文字自动分层成标题+段落+列表
- 支持 3 种预处理模式：保守整理 / 长文分层 / 教程步骤
- 3 套内置风格（意疏的样式 / 卡片精排 / 品牌手册）
- 配色系统：内置 2 套配色（哆啦A梦 / AI 口袋绿），也可以自己调主色/辅色/强调色
- 背景纹理：纯白 / 暖米底，2 种
- 字体设置：标题和正文可以分开设置
- 本地上传 / URL 插入 / 直接粘贴剪贴板图片，三种方式都支持
- 双图并排：两张图并排插入，自动算宽度
- 可设置圆角、边框、对齐方式
- 文字高亮 / 编号标题 / 提示卡片 / 文章结尾模块
- 品牌实战风格组件：开头总结框 / 设计小标题 / 设计结尾
- Badge 组件：可以插入图片，适合做「作者介绍」或「往期回顾」
- 实时双栏预览（左边写，右边看效果）
- 手机预览模式：模拟微信里的样子
- 一键复制到公众号（自动内联样式，粘贴即所得）
- 导出独立 HTML 文件
- 样式可以保存 / 导出 JSON / 导入复用
- 公众号作者 —— 排排版快一点，多留点时间写内容
- 内容运营 —— 统一风格，一键套用，不用每次重新调
- 知识博主 —— Markdown 写，直接出排版，省事
- 种草博主 —— 甜系种草模式，配色和间距都帮你调好了
直接访问：https://yishu5.github.io/GZHcomposing
如果打不开，去仓库 Settings → Pages 开启 GitHub Pages（Branch: main，Folder: /root），等一两分钟就能访问了。
- 把仓库克隆或下载到本地
- 双击打开
index.html - 开写
——不用装依赖，不用启服务，打开就能用。
排好一套喜欢的样式 → 点「保存为我的样式」→ 下次直接调用。
也可以导出 JSON 文件，分享给同事或备份到本地。
- 复制到公众号后，建议再预览一次 —— 公众号编辑器有时候会「帮忙」改一点样式，不一定是坏事，但最好确认一下
- 图片如果用外链 URL，确保地址长期可访问（建议用图床或公众号素材库）
- 本地图片会以 Base64 形式嵌入 HTML，图片太大（>5MB）会影响复制体验 —— 建议压缩后再上传
- 样式数据存在浏览器本地存储里，清浏览器数据会把保存的样式一起清掉 —— 重要样式记得导出 JSON 备份
GZHcomposing/
├── index.html # 主页面（编辑器 + 预览）
├── style.css # 样式文件
├── themes.js # 预设排版主题、配色、字体配置
├── js/
│ ├── core.js # 工具函数（escape / clamp 等）
│ ├── history.js # 撤销重做 / 草稿自动保存
│ ├── sanitize.js # HTML 安全清洗 / 图片对规范化
│ ├── wechat-compat.js# 微信公众号兼容层（flex→table 等）
│ ├── preprocess.js # 智能预处理（Markdown 解析 / 文本分层）
│ ├── components.js # 编辑器组件（图片 / 高亮 / 设计元素 / 结尾）
│ ├── editor.js # 编辑器事件 / 粘贴处理 / 工具栏
│ ├── preview.js # 预览更新 / 样式应用 / 主题渲染
│ ├── copy-export.js # 复制到公众号 / 导出 HTML / 导出 Markdown
│ ├── settings.js # 样式面板 / 配色 / 保存与加载
│ ├── layout.js # 分栏拖拽 / 滚动同步 / 手机预览
│ └── init.js # DOMContentLoaded 初始化入口
├── README.md # 你正在看的这个文件
├── tests/
│ └── smoke.spec.js # Playwright 冒烟测试（7 条）
├── playwright.config.js# 测试配置
├── package.json # 开发依赖（仅 Playwright）
└── assets/
└── qrcode.jpg # 公众号二维码
普通用户直接双击 index.html 即可使用，无需任何构建步骤。
若要跑自动化测试（需 Node.js ≥ 18）：
npm ci # 安装依赖（首次）
npx playwright install chromium # 安装浏览器（首次）
npm test # 跑 7 条冒烟测试（headless）
npm run test:headed # 有头模式，方便调试测试通过
127.0.0.1:3001启动静态服务，运行前请确保该端口未被占用。
由「意疏的 AI 口袋」维护。 打开排版器后，点右上角「帮助」可以扫码关注公众号，获取更多创作和排版工具更新。
这个工具是免费开源的，代码在 GitHub 上，随便用、随便改、随便分享。
如果你用着顺手，点个 Star ⭐ 就是对作者最大的支持。
如果有 bug 或想加功能，提 Issue 或直接 Fork 自己改 —— 开源社区嘛，大家一起搞。
好了，去排版吧。祝你写出好看的文章。🎉