我开源了一个本地公众号排版工具

01缘起

 

速读可以直接跳到第 5 部分开始阅读直接使用，但是建议同时阅读第 2 部分对Markdown 语法介绍,源码在文章最后

    我一直觉得对于写公众号这件事，是内容和表达大于排版（其实就是比较懒），加上我有时候习惯于把文章发布在不同的平台，各个平台的排版格式都要重新修改一遍，这是我不能接受的，于是我就开始研究关于公众号排版这件事。

  最开始，我看到了阿虚同学写的《阿虚同学的文章是如何排版的？》，也读到了可能吧阿禅大佬写的《可能吧的文章是如何排版的？》。这两篇文章让我意识到，公众号排版并不只是给文字加颜色、加边框，更重要的是让文章结构清楚、阅读节奏舒服。了解到借助脚本可以把 Markdown 文章转换成 HTML，再粘贴到公众号的方法。说实话，这种方式很高效，但是我一开始对于Markdown 语法以及 HTML、CSS、JS 等工具属实不擅长，加上个人比较懒散，就搁置了。

  直到后来，阿虚同学分享阿禅大佬将自己的排版工具做成了在线工具，于是乎，我后边的文章，都使用了阿禅大佬的这一工具。

Markdown 可以理解成一种“用简单符号写格式”的纯文本语言：# 表示标题，**文字** 表示加粗，> 表示引用。

它不负责把文章变得花哨，只负责把文章结构清楚地表达出来。文章写完以后，再交给排版工具统一转换成适合微信公众号的富文本。

但是我一直觉得，一方面，在线工具是否会有下线不能用的风险，另一方面，在线工具的排版和主题都是固定的，没法做调整成为我自己的专属。更重要的是，参考了上面两篇文章以后，我也越来越认同一个想法：排版不应该打断写作，应该让作者先把内容一气呵成地写出来，再用稳定的方式统一处理格式。于是我就一直在琢磨，如何做一个本地版的公众号排版工具，不依托于其他人，是完完全全属于我自己的本地化工具。随着 AI 的发展，借助它的帮助，本工具应运而生。

本工具优势与前提：首先，你只需要花半小时去哔哩哔哩或者其他地方学习一下 Markdown 语法，相信我，很简单。然后，你就可以专心码字，专注写作，文章写好以后，复制粘贴到本工具一键转换，再粘贴到公众号调整发布，搞定。

PS：虽然你在任何软件码字其实都可以，但是还是推荐找个能实时渲染 Markdown 语法的软件，我这边推荐 Typora 和 Obsidian，有其他偏好的软件当然也可以。

下边，进入正题，如何使用？

02先花几分钟认识 Markdown

 

如果你之前一直使用 Word 或者公众号后台编辑器，第一次看到 Markdown 可能会觉得多了一些井号、星号和反引号。其实它的逻辑非常简单：用少量符号标记文章结构，写作时仍然是纯文本，换到不同的软件也不容易出现格式错乱。

下面这些语法，已经覆盖了日常写公众号文章的大部分场景。

1. 标题和段落

标题前面加几个 #，就代表不同层级的标题。# 越少，层级越高。

...markdown

# 文章标题

## 二级标题

### 小节标题

这是一个普通段落。段落之间空一行，阅读起来会更清楚。

一般来说，一篇文章使用一个一级标题就够了，正文中的章节使用二级标题，小节再使用三级标题。不要为了让字体变大而连续堆很多个 #，标题层级清楚，文章结构才更容易阅读。

2. 加粗、斜体和其他文字效果

...markdown

**这是加粗文字**

*这是斜体文字*

~~这是删除线文字~~

==这是高亮文字==

`这是行内代码`

H~2~O

E=mc^2^

其中，加粗、斜体、删除线和行内代码属于比较常见的 Markdown 写法；高亮、下标和上标是本工具额外支持的写法，适合用来强调关键词、公式或特殊内容。

3. 引用、列表和任务列表

引用使用 > 开头，适合放金句、补充说明或文章中的重点观点。

...markdown

> 这是一段引用内容，可以用来强调一句话。

无序列表使用 - 或 *，有序列表使用数字加英文句号：

...markdown

- 第一项

- 第二项

- 第三项

1. 第一步

2. 第二步

3. 第三步

如果想做一个简单的待办清单，可以使用任务列表：

...markdown

- [ ] 还没有完成的事情

- [x] 已经完成的事情

4. 链接、图片和代码块

链接和图片的写法很接近，区别只是在图片前面多一个感叹号：

...markdown

[项目地址](https://gitee.com/example/official-account-layout)


代码块使用三组反引号包起来，第一行可以写语言名称：

...markdown

```javascript

const message = 'Hello Markdown';

console.log(message);

```

代码块只会作为内容展示，不会在公众号文章里执行。公众号文章中如果只是介绍操作步骤，通常使用普通文字和列表就够了；只有需要展示命令、配置或程序代码时，才建议使用代码块。

5. 表格和分割线

表格第一行是表头，第二行用短横线分隔：

...markdown

| 功能 | 用途 |

| --- | --- |

| Markdown | 负责写作和表达结构 |

| 排版工具 | 负责转换公众号样式 |

单独一行写三个或更多短横线，可以插入分割线：

...markdown

---

表格适合展示简单的对照关系。内容太复杂、单元格里还要嵌套大量格式时，建议改成列表或分段说明，最后生成的公众号效果通常会更稳定。

6. 本工具额外支持的写法

除了常见 Markdown，本工具还增加了一些适合公众号文章的扩展语法。

摘要和重点引用可以直接写在一行：

...markdown

pphh这里是一段摘要

ppqq这里是一段重点引用

也可以使用容器语法，让一段内容显示成引言或重点卡片：

...markdown

:::intro

这里是引言内容

:::

:::highlight

这里是重点内容

:::

工具还支持摘要卡片、二维码卡片、关注卡片和音乐视觉卡片，具体写法会在后面的“卡片功能怎么用”里介绍。需要注意的是，这些属于本工具的扩展写法，不是所有 Markdown 软件都能识别；如果把文章复制到其他平台，可能只会看到原始文本。

写 Markdown 时记住这几件事

1.不同的内容块之间尽量空一行，标题、列表、引用和代码块不要紧贴在一起。

2.标题按层级使用，别把标题符号只当成“调大字号”的工具。

3.图片尽量使用稳定的地址，发布公众号前最好确认图片已经上传到可长期访问的位置。

4.本工具是轻量 Markdown 解析器，不追求覆盖所有复杂语法；复杂嵌套列表、复杂表格和特别少见的扩展语法，建议先在预览区检查效果。

如果只记住一句话，可以记成：Markdown 负责把内容写清楚，公众号排版工具负责把内容变好看。

03给 Typora 换上配套主题

 

如果你喜欢用 Typora 写文章，项目里还附带了一个配套的 Typora 主题：typora-silk-morning-classic.css。

它的名字叫 Silk Morning Classic，具体显示效果与本次文章效果类似，整体是偏温和的晨雾色调，使用米白、浅蓝和陶土色作为主要颜色。标题、引用、列表、表格、图片和代码块都做了统一处理，写作时能更直观地看到文章层级，也不会像默认主题那样过于单调。

安装 Typora 主题

1.打开 Typora，进入「偏好设置」或「设置」里的「外观」页面。

2.点击「打开主题文件夹」。不同版本的 Typora 文案可能略有差异，但入口都在主题设置附近。

3.把项目根目录下的 typora-silk-morning-classic.css 复制到打开的主题文件夹里。

4.重启 Typora，在主题列表中选择 Silk Morning Classic；如果列表显示文件名，就选择 typora-silk-morning-classic。

安装以后，Typora 直接显示排版效果。你可以一边写文章，一边观察标题层级、引用、列表、表格和代码块的视觉效果。

Typora 主题和公众号主题不是一回事

这里需要特别说明一下：Typora 主题只负责写作时的本地预览，不会自动改变公众号最终显示的样式。文章写完以后，仍然要把 Markdown 复制到本工具中，再在本工具里选择公众号主题和版式，最后复制富文本到公众号后台。

我比较推荐的工作流是：

...text

用 Typora 写 Markdown

        ↓

用 Silk Morning Classic 检查文章结构

        ↓

复制 Markdown 到公众号排版工具

        ↓

选择公众号主题和版式

        ↓

复制富文本到微信公众号后台

这样做的好处是，写作和排版各自负责一件事：Typora 让你专注内容，本工具负责公众号的颜色、字号、间距和复制兼容性。即使你不用 Typora，也不影响排版工具本身的使用。

04怎么启动

 

项目地址

https://gitee.com/HarZor/official-account-layout

下载项目源码后，进入项目目录，双击运行

...powershell

.\start-local.bat

输入 1 回车，浏览器会自动打开本地排版页面。

如果你习惯使用命令行，也可以运行

...powershell

python -m http.server 4173 --bind 127.0.0.1

然后在浏览器中打开本地页面。

建议通过本地服务访问，不建议长期直接双击 index.html。

因为浏览器对本地文件的剪贴板权限限制比较严格，使用本地服务时，复制富文本会更稳定。

05工具界面怎么用

 

打开页面后，可以看到三个区域。

左侧是 Markdown 编辑区。

中间是公众号预览区。

右侧是发布检查区。

左侧负责写文章，中间负责看效果，右侧负责检查文章信息和 HTML 源码。

右侧会显示当前文章的字数、预计阅读时间、标题数量和图片数量。

整个流程不需要保存按钮。

输入内容之后，预览会实时更新。

06第一步，输入 Markdown

 

可以在左侧直接输入 Markdown，也可以把 ChatGPT、DeepSeek 或其他工具生成的文章粘贴进来。

工具支持常见的 Markdown 语法，包括标题、段落、加粗、斜体、删除线、引用、列表、任务列表、图片、链接、表格和代码块。

例如

...markdown

# 这是文章标题

这是一段正文，支持 **加粗** 和 *斜体*。

> 这是一段引用内容。

- 第一项

- 第二项

- 第三项

输入内容后，中间的预览区域会立即变化。

如果不熟悉 Markdown，也可以使用编辑器上方的工具条。

选中一段文字后，可以快速添加加粗、斜体、标题、列表、引用、行内代码、链接和分割线。

工具条还支持摘要、重点引用、关注卡片、高亮、下标和上标等功能。

比如

...markdown

==这是一段高亮内容==

H~2~O

E=mc^2^

这些内容会被转换成适合公众号文章的视觉样式。

07第二步，选择平台

 

顶部有平台选择。

如果是要发布到微信公众号，选择「微信公众号」。

如果只是想生成普通网页 HTML，可以选择「通用 HTML」。

微信公众号模式会针对公众号编辑器的限制，对外部链接、图片和 HTML 结构进行处理。

通用 HTML 模式则更适合保存网页内容，或者在普通网页中继续使用。

大多数情况下，直接选择「微信公众号」即可。

08第三步，选择主题和版式

 

主题和版式是两套独立设置。

主题主要改变颜色和整体视觉气质。

版式主要改变标题、正文、引用和卡片的排列方式。

目前工具里有多种主题可供选择，包括绿蓝、黑白、故宫朱墙、极光玻璃、铅字报刊、梵高星夜、侘寂素灰等。

版式目前包括经典原版、精致通用、杂志专栏、清爽极简、时间轴和水墨卷轴。

如果是普通的公众号文章，可以选择精致通用。

如果文章比较长，有明显的章节结构，可以选择杂志专栏。

如果是教程、步骤说明或复盘文章，可以尝试时间轴。

如果希望整体更加克制，清爽极简会更合适。

如果内容偏东方审美，也可以试试水墨卷轴。

除了主题和版式，还可以调整字号和行距。

字号有小、中、大三种选择。

行距有紧凑、舒适和宽松三种选择。

作者名称、头像 URL 和阅读时间模块也可以自定义。

如果不想显示阅读时间，可以关闭时间模块。

这些设置会自动保存在浏览器本地，刷新页面后仍然可以继续使用。

09第四步，查看预览

 

中间的预览区域会显示生成后的公众号文章。

这里建议重点检查几个地方。

标题有没有太长。

段落间距是否合适。

引用和重点内容是否清楚。

图片是否超出正文宽度。

列表和表格是否正常。

链接是否需要调整。

工具还提供了「深色检查」模式。

这个模式可以模拟深色环境下的预览效果，用来检查浅色文字、卡片和图片是否还能保持清晰。

深色检查只影响本地预览，不会改变最终复制出去的 HTML。

10第五步，复制到公众号后台

 

确认排版没有问题后，点击「复制富文本」。

工具会把生成的富文本 HTML 和纯文本一起写入剪贴板。

然后打开微信公众号后台的图文编辑器，直接粘贴即可。

正常情况下，标题、段落、引用、列表、图片和卡片样式都会保留下来。

如果浏览器没有成功完成富文本复制，页面会自动选中预览区域。

这时候按下 Ctrl+C，再到公众号后台粘贴即可。

工具还提供了「复制 HTML」功能。

如果你想检查生成结果，或者需要把 HTML 保存到其他地方，可以使用这个功能。

11图片和链接怎么处理

 

工具支持 Markdown 图片语法

...markdown


图片会自动居中显示，并限制最大宽度，避免粘贴到公众号后台后超出正文区域。

实际使用时，建议先把图片上传到图床/公众号素材库，再把图片地址放进 Markdown。

这样图片地址更加稳定。

外部链接在微信公众号模式下，会自动处理成文字和 URL，避免公众号后台对外部链接处理不一致。

公众号内部链接会尽量保留。

如果文章里包含不安全的链接或图片地址，工具不会直接生成可点击内容。

12卡片功能怎么用

 

工具还支持摘要卡片、重点引用、关注卡片、二维码卡片和音乐卡片。

这些卡片适合放在文章开头、中间或结尾，用来突出重点内容。

需要说明的是，音乐、视频和小程序卡片属于视觉展示效果，并不是真正的公众号官方组件。

如果需要播放音乐、插入视频或添加小程序，最终还是建议在微信公众号后台使用官方组件完成。

13为什么做成本地开源工具

 

在线工具的优点是打开就能用。

本地工具的优点，是文章和数据可以留在自己的电脑里。

同时，源码也是公开的。

你可以查看它是怎么处理 Markdown 的，怎么生成 HTML 的，也可以根据自己的需求修改主题、版式和功能。

如果你觉得某个颜色不好看，可以自己改。

如果你想新增一种版式，也可以直接修改源码。

如果你想把它和自己的写作流程、发布助手连接起来，也可以继续扩展。

它不是一个只能使用、不能修改的黑盒工具。

这也是我选择开源本地化的原因。

14它不负责什么

 

这个工具目前只负责本地排版和复制。

它不会自动登录公众号。

不会自动发布文章。

不会自动上传图片到公众号素材库。

也不会替你完成音乐、视频和小程序等官方组件的插入。

这些事情，最后仍然需要在微信公众号后台完成。

我更希望它把边界讲清楚。

它不负责替你运营公众号，也不负责替你写内容。

它只负责把 Markdown 变成一份更适合微信公众号粘贴的富文本 HTML。

15最后

 

如果你平时用 Markdown 写文章，或者经常把 AI 生成的内容整理成公众号格式，可以试试这个项目。

下载源码，启动本地页面，输入 Markdown，选择主题，查看预览，然后复制富文本。

不用注册，不用登录第三方平台。

文章始终在自己的电脑里。

它未必能让你的文章马上变得更好。

但可以让你少花一点时间处理字号、行距、链接和复制粘贴。

把更多时间留给真正重要的事情。

写什么。

为什么写。

以及，你到底想对读者说些什么。

16参考文章与项目链接

 

本文的排版思路参考了下面两篇公众号文章。

1.《阿虚同学的文章是如何排版的？》

2.《可能吧的文章是如何排版的？》

3.official-account-layout (https://gitee.com/HarZor/official-account-layout​)，本文介绍的开源本地公众号排版工具。

本文涉及到的附件：official-account-layout-master.zip

4.《如何在Windows 11系统电脑上安装Python？》

本文来自「棉花糖的神奇口袋」

作者：墨池有雨

阅读原文：点击这里