免费在线 Markdown 转微信公众号排版工具
输入 Markdown → 一键生成出版级公众号排版 → 复制即用,免注册打开即写。
关键词:Markdown 转公众号 / 公众号排版工具 / 微信编辑器 / 在线排版 / 文章排版美化 / 微信图文排版 / WeChat Markdown
把 Markdown 变成可以直接粘贴进微信公众号编辑器的精美排版。 21 套精选主题覆盖简约、文艺、国风、商务、潮流等风格,所有样式内联,粘贴即用。
- 公众号推文 — 技术 / 产品 / 运营 / 设计长文一键排版
- 技术博客转载 — Markdown 博文转微信可读样式
- 产品文档 / 教程 — 代码块、表格、公式清晰呈现
- 课程讲义 / 企业周刊 — 多主题适配不同调性
左:Markdown 编辑 + 工具栏 右:公众号排版实时预览
编辑器
- 完整 Markdown:标题、段落、列表、表格、代码块、引用、图片、分隔线、链接
- 可视化工具栏 + 快捷键(
Ctrl/Cmd+B加粗、+I斜体、+Shift+C复制) - LaTeX 公式:
$...$行内 /$$...$$块级,基于 KaTeX - 自动保存(浏览器本地)、全屏沉浸编辑、
.md/.markdown/.txt导入
21 套主题
| 简约 | 文艺 | 潮流 | 时尚 | 治愈 | 商务 | 国风 |
|---|---|---|---|---|---|---|
| 极简留白 | 新中式 | 潮流先锋 | 杂志画报 | 温暖治愈 | 商务蓝调 | 党政红金 |
| 灰调雅致 | 莫兰迪文艺 | 赛博霓虹 | 法式浪漫 | 清新自然 | — | — |
| — | 紫墨书签 | — | 橄榄手记 | 暖墨手记 | — | — |
| — | 摸鱼绿 · 摸鱼票据 | — | 极简石墨 · 禅意留白 · AI 笔记 | — | — | — |
输出
- 一键复制:生成带内联样式的 HTML,直接粘贴进公众号编辑器
- 导出
.html文件存档 - 公众号兼容性实时校验:复制前提示
data:/blob:图片等会导致粘贴丢失的问题
👉 https://health-525.github.io/wechat-article-formatter/
- 左侧输入或导入 Markdown
- 顶部选择主题
- 右上角「复制」
- 粘贴到微信公众号编辑器,发布
git clone https://github.com/Health-525/wechat-article-formatter.git
cd wechat-article-formatter
npm install
npm run dev # http://localhost:3000- React 19 · TypeScript · Vite 7
- Tailwind CSS 3 — 编辑器界面
- Marked — Markdown 解析
- KaTeX — 数学公式
- lucide-react — 图标
src/
components/
EditorWorkspace.tsx # 主编辑器(编辑、预览、工具栏、主题、复制)
ErrorBoundary.tsx
workspace/ # 工具栏 / 主题下拉 / 帮助 / 快捷键弹窗 / 分割条
utils/
markdownParser.ts # Markdown → 公众号 HTML(内联样式 + 复制 + 校验)
themes.ts # 经典 12 套主题(createTheme 构建器)
gzhDesign/ # gzh-design 9 套主题(renderer + 9 套组件库)
mathRenderer.ts # LaTeX 提取与注入
mathSvgRenderer.ts # gzh-design 数学公式 SVG 渲染
katexCss.ts # KaTeX 样式(自动生成)
taskRenderer.ts # 任务清单渲染
hooks/ # useDebounce / useOnClickOutside
public/ # favicon / og-image / 纸纹纹理 / robots / sitemap
- 💡 图片要能复制进公众号:请使用公网可访问的 https 图片地址。应用内上传/粘贴的图片会转为
data:格式,公众号编辑器无法自动上传(粘贴后会丢失),复制时墨排会给出提醒。 - 💡 所有样式均为内联样式,
<section>结构、<span leaf="">包裹,贴合公众号编辑器过滤规则。 - 💡 表格、引用、代码块均带主题化样式;数学公式用
$...$/$$...$$。 - 💡 复制到公众号后若公式样式异常,可改用「导出 HTML」。
源码与部署都在 main 分支:推送到 main 会自动触发 GitHub Actions 构建(npm run build)并部署到 GitHub Pages。
一次性设置:仓库 Settings → Pages → Source 选择「GitHub Actions」。
git commit -m "feat: ..."
git push origin main # 推送即自动部署欢迎 Issue / PR:Fork → 基于 main 建特性分支 → 提 PR。
MIT © 2025 墨排
如果墨排帮到了你,欢迎 ⭐ Star · 🍴 Fork · 分享,是对我们最大的支持。