# 公众号排版工具

**Repository Path**: cloud-lumiere/typesetting

## Basic Information

- **Project Name**: 公众号排版工具
- **Description**: markdown微信公众号文章排版工具
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2026-06-15
- **Last Updated**: 2026-07-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Markdown 公众号排版工具

一个纯前端、零构建的 Markdown 编辑器，专为微信公众号文章排版设计。支持实时预览、数学公式、流程图、多种视觉风格，一键复制格式化 HTML。

## 使用方式

直接用浏览器打开 `index.html`，无需安装任何依赖。

1. 左侧输入 Markdown，右侧实时预览排版效果
2. 点击"自定义"调整各要素的颜色、字号等
3. 点击"复制排版"，直接粘贴到公众号编辑器

## 已支持特性

- **Markdown 语法**：
    - 标题 H1-H6
    - 加粗、斜体、粗斜体、引用
    - 可嵌套有序/无序列表（多级缩进）
    - 行内代码、围栏代码块（支持缩进）
    - 链接、图片
    - 分割线 `---`
- **数学公式** — 基于 MathJax 3 渲染 LaTeX 公式（行内 `$...$` / 块级 `$$...$$`），SVG 输出，微信兼容
- **流程图/图表** — 基于 Mermaid 渲染流程图、时序图、类图等（```` `mermaid）
- **一键复制** — 复制格式化 HTML 到剪贴板（4 层回退），可直接粘贴到微信公众号编辑器
- **字数统计** — 实时显示中文字数
- **实时预览** — 350ms 防抖，输入 Markdown 后立即渲染排版效果
- **样式自定义** — 调色板面板，调整全局字体、字号、行高，以及各要素的颜色、尺寸、背景色，自动保存到 localStorage
- **8 套预设主题** — 覆盖经典、GitHub、科技、极客、古风等风格
- **自动保存草稿** — 写作过程中 Markdown 内容自动存入 localStorage，防止误关页面丢失内容。
- **版本控制功能** — 默认存储最近保存的是个版本

| 样式 | 描述 |
|------|------|
| 样式1 | 默认经典 |
| 样式2 | GitHub 风格 |
| 样式3 | 红色强调 |
| 样式4 | 科技蓝 |
| 样式5 | 极客黑 |
| 样式6 | 东方红 |
| 样式7 | 思想家 |
| 样式8 | 极简白 |

## 项目结构

```
index.html              — 入口页面，引用所有模块
css/
  styles.css            — 全局样式（布局、按钮、弹窗等）
js/
  styles.js             — 8 套预设主题的样式配置数据
  customizer.js         — 自定义覆盖系统（localStorage 读写、样式合并）
  math.js               — MathJax 初始化与 LaTeX 公式 SVG 渲染
  mermaid.js            — Mermaid 初始化与流程图渲染
  parser.js             — Markdown 解析器（块级 + 行内解析）
  clipboard.js          — 剪贴板复制（4 层回退策略）
  ui.js                 — UI 构建（自定义面板、渲染管道、防抖）
  app.js                — 入口初始化（DOM 引用、事件绑定）
  versions.js           — 版本管理模块（数据 CRUD + UI 渲染）
```

### 模块职责

| 模块 | 职责 |
|------|------|
| `styles.js` | 定义 `STYLES` 和 `TABLE_STYLES` 配置对象，包含全部 8 套主题的 CSS 字符串 |
| `customizer.js` | 管理用户自定义覆盖：`DEFAULT_OVERRIDES` 默认值、localStorage 持久化、`getStyle()` 样式合并 |
| `math.js` | 加载 MathJax，提供行内/块级公式渲染，SVG 输出适配微信 |
| `mermaid.js` | 初始化 Mermaid，提供流程图渲染，SVG 属性规范化 |
| `parser.js` | 自研 Markdown 解析器，支持多级列表嵌套、表格、引用、代码块、数学公式占位替换 |
| `clipboard.js` | 剪贴板写入，含 ClipboardItem API → copy 事件拦截 → Range 选中 → textarea 回退 |
| `ui.js` | 自定义样式弹窗 UI 构建、渲染管线 `render()`、防抖 `debounceRender()` |
| `app.js` | DOM 元素引用、事件绑定、示例内容填充、初始化调用 |

## 技术

- 纯 HTML / CSS / JavaScript（ES5）
- [MathJax 3](https://www.mathjax.org/) — LaTeX 公式渲染
- [Mermaid](https://mermaid.js.org/) — 流程图/图表渲染
- 无框架、无构建工具、无外部依赖（除 CDN 加载的 MathJax 和 Mermaid）

## 后续开发规划

**1. 图片上传/粘贴**
当前图片靠 Markdown 的 `![](url)` 语法，公众号图床需要手动上传。可以加一个图片上传面板。集成第三方图床 API，或利用 `URL.createObjectURL` 实现本地预览后手动上传。

**2. 全文导出为图片**
公众号封面图、朋友圈分享图需要。后续将用 `html2canvas` 把预览区渲染为 PNG，用户一键下载，省去截图裁剪的麻烦。

**3. 持久化存储增强**
已有样式配置的 localStorage 存储，后续可加"用户自定义模板"功能，保存/加载多套自配方案。

**4. 阅读时间估算**
文章底部显示"共 X 字，阅读约 Y 分钟"。

**5. 更多 Markdown 扩展**
任务列表（`- [x]`）、脚注、目录生成、Emoji 快捷输入。

**6. 夜间模式 / 编辑器主题**
当前编辑区是白底黑字，后续增加明暗主题切换。

**7. 响应式改进**
当前移动端排版会纵向堆叠面板。后续将把编辑器和预览做成 Tab 切换（编辑/预览），在小屏上体验更好。

**8. 快捷键**

## 许可证

MIT