md2wxarticle · 公众号排版工具

一款从公众号文章提取排版主题、用 Markdown 写公众号文章的本地工具。上传一篇公众号文章的 zip 包（.html + 图片目录），工具自动解析原文排版样式生成主题；在左侧写 Markdown，右侧实时预览公众号效果，一键复制内联样式的 HTML 到公众号编辑器。

功能特性

• 左写右看：左侧 Markdown 编辑（带工具栏、快捷键），右侧 375px 手机宽度实时预览
• 主题系统：
  • 内置主题：小浣熊紫（渐变徽章风格）、极客绿（纯色圆角块风格）
  • 自定义主题：可视化表单（配色 + 标题风格），支持增删改、持久化
  • zip 提取主题：上传公众号文章 zip 包，自动解析原文排版样式生成主题
• 高还原度提取：完整样式指纹——直接复用原文标题/正文/引用/代码块的完整样式（渐变、字号、字距、边框、阴影），而非仅提取颜色套模板
• 一键复制：生成带内联样式的公众号 HTML，可直接粘贴到公众号后台编辑器
• 单文件零依赖（index.html + lib/），双击即用

快速开始

git clone https://github.com/cooljser/md2wxarticle.git
cd md2wxarticle
# 直接用浏览器打开 index.html 即可，无需构建

提取文章主题

1. 保存公众号文章页面为 zip 包（文章.html + 文章_files/ 图片目录）
2. 打开工具 → 「自定义主题」→「从文章 zip 提取主题」→ 选择 zip 文件
3. 确认主题名称 → 保存，主题自动应用

写文章

• 左侧用 Markdown 写作（支持 ## 标题、列表、表格、代码块、图片等）
• 扩展语法：
  • :::card 标题 ... :::：卡片组件
  • :::tip 标题 / :::warn 标题 ... :::：提示框 / 警告框
  • :::divider ... :::：分隔装饰
• 右侧实时预览 → 「复制公众号 HTML」→ 粘贴到公众号编辑器（图片需重新上传）

快捷键

快捷键	功能
Ctrl/Cmd + Z	撤销
Ctrl + Y / Cmd + Shift + Z / Ctrl/Cmd + R	重做
Ctrl/Cmd + B / I / K	加粗 / 斜体 / 链接
Tab / Shift + Tab	多行缩进 / 反缩进
Ctrl/Cmd + Enter / Shift + Enter	下方 / 上方插入空行
Ctrl/Cmd + Shift + K	删除当前行

目录结构

md2wxarticle/
├── index.html          # 工具主程序（含全部逻辑与 UI）
├── assets/
│   └── index.png       # README 配图
├── lib/
│   ├── marked.umd.js   # Markdown 渲染库（marked 17）
│   └── jszip.min.js    # zip 解析库（JSZip 3.10）
└── README.md

技术说明

• 纯前端实现，无后端、无构建步骤、无网络请求（zip 仅本地内存解析）
• 主题存浏览器 localStorage（mp_tool_custom_themes_v1），刷新不丢失
• 复制的 HTML 为内联样式，公众号编辑器可正常渲染
• 提取逻辑：定位 #js_content 正文 → 解析 H2 渐变/纯色/竖条/渐变文字标题 → 提取标题/正文/引用/代码块完整样式指纹 → 映射为主题参数

License

MIT