纯前端 Markdown 转微信公众号文章排版工具,支持本地排版和 AI 智能排版双模式。
下载
git clone https://github.com/moduwusuowei/geshifang.git
cd geshifang
npm start
# 或
node server.js浏览器打开 http://localhost:8899 即可使用。
| 功能 | 说明 |
|---|---|
| Markdown 编辑 | 左栏文本区域输入或粘贴 Markdown |
| 行号显示 | 编辑区左侧显示行号 |
| 粘贴图片 | 从剪贴板粘贴图片 → 自动插入  占位符并渲染到预览 |
| 粘贴 Excel 表格 | 从 Excel 复制单元格 → 自动转为 Markdown 表格语法 |
| 拖入 .md 文件 | 拖拽 Markdown 文件到编辑区 → 自动载入 |
| 导入 .md 文件 | 点击工具栏 📂 按钮选择文件导入 |
| Tab 缩进 | 按 Tab 键插入制表符,非跳转焦点 |
| 快捷插入 | 工具栏 B/I/链接/引用/图片 按钮,快速包裹选中文本 |
| 草稿自动保存 | 输入 500ms 防抖 + 关闭页面时保存到 localStorage |
| 多草稿管理 | 工具栏 📝 按钮管理多个草稿(保存/切换/删除) |
点击 "一键排版" 或按 Ctrl+S,将 Markdown 渲染为带内联样式的公众号文章 HTML。
- 本地排版(默认):纯客户端渲染,无需联网
- AI 排版(配置 API Key 后):调用 DeepSeek API 智能排版
排版后自动执行:
- 字数/段落/阅读时间 统计注入到标题下方
- 错别字自动修正
- 敏感词检测并警告
- 首行缩进、字体、段间距应用
| 功能 | 说明 |
|---|---|
| WYSIWYG 编辑 | 预览区 contenteditable,可直接修改排版结果 |
| 撤销/重做 | Ctrl+Z / Ctrl+Y 或工具栏按钮,最多 50 步 |
| 搜索替换 | Ctrl+F 切换搜索栏,支持前/后导航和全部替换 |
| 一键复制 | 复制排版 HTML 到剪贴板,直接粘贴到公众号后台 |
| 复制纯文本 | 去除所有格式,复制纯文字内容 |
| 自动生成目录 | 根据 H1~H4 标题在文章顶部生成可点击目录 |
| 功能 | 说明 |
|---|---|
| 润色 | 优化表达、修正语病,保持原意 |
| 扩写 | 丰富内容、增加细节 |
| 缩写 | 精简提炼核心信息 |
| 翻译 | 支持中译英/日/韩三种语言 |
点击工具栏 AI 按钮打开面板,输入或选中文字,选择操作类型即可。需要先配置 DeepSeek API Key。
| 功能 | 说明 |
|---|---|
| H1~H4 颜色+字号 | 工具栏取色器 + 下拉分别设置各级标题 |
| 表头色 | 自定义表格 thead 背景色 |
| 字体 | 系统默认 / 衬线 / 等宽 / 楷体 / 宋体 |
| 段间距 | 0.5em / 1em / 1.5em / 2em |
| 首行缩进 | 开关控制段落 2em 缩进 |
| 样式模板 | 保存当前样式配置为模板,快速切换(右键删除) |
| 模板导入/导出 | 工具栏 📤 按钮导出/导入 JSON 模板文件,方便分享 |
| 自定义 CSS | 写入 CSS 覆盖任意样式,内置 9 套预设模板 |
| 模板 | 风格 |
|---|---|
| 🌿 简约留白 | 干净透气,文字为主 |
| ☀️ 暖阳橙调 | 温暖活力,橙色调 |
| 🌲 森林绿意 | 自然沉稳,绿色系 |
| 🌆 暮色紫调 | 优雅深邃,紫色系 |
| 🌊 海洋蓝调 | 冷静专业,蓝色系 |
| 🏮 国风典雅 | 朱红墨色,楷体宣纸感 |
| 🌙 极客暗色 | 深色背景,GitHub 风格 |
| 🎨 柔和莫兰迪 | 低饱和度,高级克制 |
| 💻 代码舒适 | 暖深灰代码块,阅读友好 |
| 元素 | 语法示例 | 说明 |
|---|---|---|
| H1 | # 标题 / ## 标题 / 一、标题 |
左侧蓝色边框 |
| H2 | ## 标题 / ### 标题 / (一)标题 |
左侧浅蓝边框 |
| H3 | ### 标题 / #### 标题 / 【标题】 |
纯文字 |
| H4 | #### 标题 / ##### 标题 |
纯文字 |
| 段落 | 普通文字 | 行高 1.8 |
| 加粗 | **文字** |
深蓝色粗体 |
| 删除线 | ~~文字~~ |
灰色删除线 |
| 内联代码 | `代码` |
浅灰底 + 红色字 |
| 链接 | [文字](url) |
蓝色下划线 |
| 图片 |  |
居中圆角 |
| 无序列表 | - 项 / * 项 |
支持套嵌缩进 |
| 有序列表 | 1. 项 |
支持套嵌缩进 |
| 任务列表 | - [ ] 待办 / - [x] 已完成 |
复选框 |
| 引用 | > 引用 |
浅灰底 + 蓝色左边框 |
| 代码块 | ```语言 |
深色底等宽字体 |
| 缩进代码 | 行首 Tab / 4空格 | 自动识别 |
| 表格 | | 列1 | 列2 | |
斑马纹 + 圆角 |
| 分割线 | --- |
灰色横线 |
| 公式 | $$ LaTeX $$ |
CodeCogs SVG 渲染 |
| 功能 | 说明 |
|---|---|
| 导出 Markdown | 下载 .md 文件,粘贴图片转为 base64 |
| 导出长图 | 使用 html2canvas 渲染预览为 PNG |
| 导出 PDF | 使用 html2canvas + jsPDF 生成 PDF 文件 |
| 功能 | 说明 |
|---|---|
| 深色/浅色 | 页眉按钮切换,持久化偏好 |
| 全屏编辑 | 页眉按钮,主区域全屏 |
| 手机预览 | 限制预览宽度 375px 模拟手机 |
| 功能 | 说明 |
|---|---|
| 历史版本 | 每次排版保存快照,最多 20 条,可回溯恢复 |
| 快捷键面板 | 按 ? 键显示快捷键列表 |
| 快捷键自定义 | 工具栏 ⌨ 按钮可自定义快捷键 |
| 页脚配置 | 通过 window.GS_CONFIG.footer 自定义创作者信息 |
编辑 config/apiConfig.js:
export const BACKEND_API_KEY = 'your-deepseek-api-key'默认值为 'your-api-key-here',此时使用纯本地排版。
编辑 index.html 顶部 <script> 中的 window.GS_CONFIG:
window.GS_CONFIG = {
footer: {
text: '格式坊 · 本地 Markdown 转公众号排版工具',
creator: { label: '创作者', url: 'https://example.com', name: 'Your Name' },
license: { label: '开源', url: 'https://github.com/...', name: 'MIT License' }
}
}设为 null 或删除则不显示页脚。
本项目是纯静态前端应用,无需后端服务,可直接部署到任意静态托管平台。
方式一:直接上传(最快)
- 打开 Cloudflare Pages → 创建项目
- 选 直接上传 → 将
geshifang文件夹拖入 - 等待部署完成,获得
xxx.pages.dev链接
方式二:连接 Git 仓库
- Cloudflare Pages → 创建项目 → 连接 Git 仓库
- 构建设置:框架预设 None,构建输出目录
. - 保存并部署
- 安装 Vercel CLI:
npm i -g vercel - 在
geshifang目录下运行vercel,按提示部署
或直接将 geshifang 文件夹拖入 Vercel 控制台。
- 将代码推送到 GitHub 仓库
- Settings → Pages → 源选择
main分支,目录选/(根目录) - 或使用 GitHub Actions 自动部署
server {
listen 80;
server_name your-domain.com;
root /path/to/geshifang;
index index.html;
location / { try_files $uri $uri/ /index.html; }
}在项目根目录创建 Dockerfile:
FROM node:20-alpine
WORKDIR /app
COPY . .
EXPOSE 8899
CMD ["node", "server.js"]docker build -t geshifang .
docker run -d -p 8899:8899 geshifang所有数据存储在浏览器 localStorage:
| Key | 用途 |
|---|---|
geshifang_draft |
当前编辑中的 Markdown 草稿 |
geshifang_drafts |
多草稿管理(JSON 对象) |
geshifang_theme |
主题偏好 dark / light |
gs_templates |
样式模板(JSON) |
gs_custom_css |
自定义 CSS 文本 |
gs_history |
历史版本快照 |
gs_custom_shortcuts |
自定义快捷键配置 |
- 前端:原生 HTML / CSS / JavaScript ES Module
- 样式:Tailwind CSS(CDN)+ CSS 变量主题
- 排版引擎:纯 JavaScript 内联样式生成器
- AI 接口:DeepSeek API(可选)
- 图片渲染:html2canvas
- 公式渲染:CodeCogs LaTeX SVG
- 服务器:Node.js 静态文件服务
1.一键格式化
2.添加目录
Addr: https://github.com/moduwusuowei/geshifang.git
喜欢就添个star,为我的创作提供更强的动力......


