不只是排版 —— 一句话让 AI 帮你排版,一键分发 14+ 平台。
专为公众号 / 知乎 / CSDN 等中文创作者打造的本地 Markdown 排版工具。
English · 中文
👉 无需安装,打开即用:https://mopai-markdown.vercel.app
「Markdown 转公众号」的工具不少,MoPai 想做的是从写作到发布的完整闭环——下面这些是它和纯排版工具不一样的地方:
- 🤖 AI 排版师 — 「换成适合技术文的主题,主色改微信绿」一句话搞定。AI 通过受限工具直接操作编辑器,每步操作一张卡片、一键撤销。纯排版工具没有这个。
- 🔌 可被脚本/Agent 驱动 —
?load=注入入口,外部流水线生成好文章后直接拉起编辑器待审。 - 🚀 一键分发全平台 — 14 平台按最优格式一键复制;配合 WechatSync 扩展可直接同步到 29+ 平台创建草稿。
- 🖼️ 四种导出 — HTML / PDF / 长图 PNG / Word,文件自动以文章标题命名。
- 📱 离线可用 — PWA 可安装为桌面应用,手机端编辑/预览功能完整。
- 🎨 13 主题 + 深度定制 — 暗色模式、自定义主题色、字体字号、自定义 CSS。
| 暗色模式 | 发布助手 |
|---|---|
![]() |
![]() |
| 图床管理 | 设置面板 |
|---|---|
![]() |
![]() |
- 实时预览 — 左侧 Markdown 编辑,右侧即时渲染
- 撤回/重做 — ⌘Z 撤回、⌘⇧Z 重做,最多 50 步历史
- 渲染防抖 — 输入 300ms 后才渲染预览,长文编辑不卡顿
- 格式工具栏 — 加粗、斜体、标题、链接、图片、代码块等一键插入
- Tab 缩进 — 编辑器支持 Tab/Shift+Tab 缩进
- 查找替换 — ⌘F 打开查找,支持全文替换
- 专注模式 — ⌘\ 隐藏侧边栏,全屏写作
- 行号显示 — 可在设置中开关
- 快捷键 — ⌘B/⌘I/⌘K/⌘S/⌘Z/⌘⇧Z/⌘F/⌘\ 等
- 13 种精美主题 — 默认公众号、技术风格、优雅简约、深度阅读、纽约时报、金融时报、Medium、Apple 极简、Claude、少数派、竹林、暗夜模式、渐变彩虹
- 暗色模式 — 一键切换深色/浅色界面
- 自定义颜色 — 12 种预设色 + 取色器
- 字体设置 — 3 种字体风格 + 5 档字号
- 自定义 CSS — 高级用户可注入自定义样式
- Mac 风格代码块 — 带红黄绿圆点的代码块
- 14 平台一键发布 — 微信公众号、知乎、微博、CSDN、简书、掘金、今日头条、B站专栏、百家号、SF思否、大鱼号、企鹅号、小红书、豆瓣
- 🆕 多平台一键分发 — 集成 WechatSync SDK,安装 Chrome 扩展后可一键同步到 29+ 平台
- 智能格式适配 — 自动为每个平台复制最优格式(富文本/Markdown/摘要)
- 一键复制到公众号 — 复制富文本直接粘贴到微信编辑器(⌘⇧C)
- 手机预览模式 — 模拟手机屏幕预览排版效果
- 📱 手机端自适应 — 移动端编辑/预览 Tab 切换,完整功能可用
- 导出 HTML — 完整 HTML 文件
- 导出 PDF — 打印为 PDF
- 🆕 导出长图 — 完整文档截图导出为 PNG
- 🆕 导出 Word — 导出 .docx 文件
- 🆕 智能文件名 — 导出文件自动使用文章标题命名
- 同步滚动 — 编辑器与预览区流畅同步滚动
- 图片粘贴 — ⌘V 粘贴图片,自动嵌入
- Base64 智能隐藏 — 编辑器内以短占位符显示,预览/导出时还原完整数据
- SM.MS 图床 — 粘贴图片自动上传获取永久链接(可关闭)
- 拖拽上传 — 直接拖拽图片到编辑器
- 浮动大纲目录 — TOC 面板快速跳转
- 微信链接转脚注 — 自动将超链接转为脚注格式
- Mermaid 图表 — 支持流程图、时序图等
- 模板库 — 内置多种 Markdown 模板
- 草稿自动保存 — 内容自动保存到本地
- 文件上传 — 支持上传 .md 文件
- 字数统计 — 实时显示字数、字符数、阅读时间
- 写作目标 — 设置字数目标,进度条实时追踪
- PWA 支持 — 可安装为桌面应用离线使用
MoPai 内置了 WechatSync SDK,支持一键将排版好的文章同步到 29+ 平台。
- 安装 文章同步助手 Chrome 扩展
- 在各目标平台的网页端登录账号
- 在 MoPai 编辑器中写好/排版好文章
- 点击工具栏「导出 ▾」→「🚀 分发到多平台」
- WechatSync 弹出同步对话框,勾选目标平台,一键发布
自动提取文章标题和首图作为封面,同步为草稿模式,发布前可在各平台二次编辑确认。
在 ⚙️ 设置面板填入 API Key 后,点顶栏「🤖 AI」打开助手面板。支持 DeepSeek / 智谱 GLM / SiliconFlow / 通义千问 / OpenAI / OpenRouter,Key 只存在本机浏览器,不经过任何服务器。
能做两类事:
- 直接操作编辑器 — 换主题、改主题色/字体/字号、局部或整篇改写。每步操作在面板里生成一张卡片,可单独撤销
- 生成文本 — 起标题、写摘要、写小红书版文案,直接回复在对话里,不动正文
安全边界:模型只能输出结构化 JSON,经校验后调用白名单里的 5 个函数,永不 eval。发布、清空、导出等不可逆操作不在白名单里,AI 无法触发。整篇改写必须由你点「应用」才生效。
给 AI 流水线/脚本用的入口:把生成好的 .md 放到站点同源目录,然后打开
http://localhost:8080/index.html?load=article-assets/my-post/article.md
编辑器会强制拉取最新文件(绕开 HTTP 与 Service Worker 缓存)并注入。
- 只接受同源路径,跨域 URL 会被拒绝
- 注入的标签页草稿存
sessionStorage,与其他标签页互不覆盖;刷新该页保留已编辑内容 - 放在
article-assets/下的素材不走 SW 缓存,流水线重新生成后立即可见
# 克隆项目
git clone https://github.com/ye4wzp/mopai-markdown.git
cd mopai-markdown
# 启动本地服务器(三选一)
python3 -m http.server 8080
# 或
npx serve -p 8080
# 或
php -S localhost:8080
# 打开浏览器访问
open http://localhost:8080无需安装任何依赖,纯前端项目,开箱即用。
| 快捷键 | 功能 |
|---|---|
⌘B |
加粗 |
⌘I |
斜体 |
⌘K |
插入链接 |
⌘S |
保存到历史 |
⌘Z |
撤回 |
⌘⇧Z |
重做 |
⌘⇧C |
复制到公众号 |
⌘F |
查找替换 |
⌘\ |
专注模式 |
Esc |
退出专注/查找 |
- Vue 3 — CDN 引入,无需构建工具
- markdown-it — Markdown 解析引擎
- Highlight.js — 代码语法高亮
- Mermaid.js — 图表渲染
- html2canvas — 长图导出
- html-docx-js — Word 导出
- WechatSync SDK — 多平台分发
- 原生 CSS — 无框架依赖,自定义设计系统
mopai-markdown/
├── index.html # 主页面
├── manifest.json # PWA 配置
├── service-worker.js # Service Worker(离线缓存)
├── css/
│ └── styles.css # 样式文件
├── js/
│ ├── app.js # Vue 应用主逻辑
│ ├── themes.js # 13 种主题定义 + 示例内容
│ ├── ai-client.js # LLM 传输层(OpenAI 兼容 + SSE 流式,BYOK)
│ ├── templates.js # 模板库
│ └── publish-utils.js # 发布 HTML 兼容处理
├── tests/ # Chrome CDP 集成测试
├── screenshots/ # 项目截图
└── README.md
本项目的开发受到以下优秀开源项目的启发:
| 项目 | 作者 | 贡献 |
|---|---|---|
| 花生编辑器 (huasheng_editor) | @alchaincyf | 项目灵感来源,参考了其 Markdown 转公众号的核心思路 |
| doocs/md | @doocs | 参考了其主题设计和排版理念 |
| Wechatsync | @lljxx1 | 多平台分发 SDK 集成 |
| markdown-it | markdown-it 团队 | Markdown 解析引擎 |
| Highlight.js | Highlight.js 团队 | 代码语法高亮 |
| Mermaid | Mermaid 团队 | 图表渲染支持 |
MIT © 2026 ye4wzp



