10 分钟就能轻松上手，这是我的公众号排版小技巧

面对一篇微信公众号的文章，大家可能觉得没什么不寻常，但如果你有看到作者创作时使用的排版工具，便知道一篇文章排版工作的「不易」了。

比如说一篇文章的标题、引言、小标题、段落、引导等等，通常需要在浏览器插件、第三方浏览器等方式逐个插入模板来调整实现。虽然看似方便，但是日复一日重复这些操作，是十分枯燥无味的。

近期因为工作需要我捡起这活，在被「折磨」好一段时间后，发现真的做不来这种重复的工作，于是决定花时间解决它。当然我也并非标新立异，只是觉得一个内容工作者，应该把更多的时间留在内容上，重复的排版工作交给程序执行不是更香吗？

▍公众号排版样式的自动化

微信公众号的文章并非长篇大论，绝大多数也不是专业文献，所以它最常见的排版样式一般是一级标题、二级标题、正文、引用、图片、加粗等等。

这么一看，很容易联想到专门给写作者用排版语言：Markdown。它的好处是能让你通过键盘就能完成特定的格式排版工作，十分快捷高效。当然了，它也并非复杂的编程语言，可能你只需花 10 分钟就能轻松掌握。

比如说：写一级标题只需在文字前面加一个 # 号，引用段落样式只需在文字前加 > 号，文字加粗则在文字两边分别加两个 * 号：

Markdown演示（少数派的读者都很熟悉了～）

如上图所示，通过 Markdown 写作，我们解决了内容排版样式自动化。但最重要的问题是：微信公众号编辑器不支持 Markdown，我们该如何同步自动化排版好的内容呢？

Markdown 转富文本

在网页查看代码不难发现，微信公众号编辑器其实源于百度 FEX 前端团队的开源的 ueditor 富文本编辑器项目，所以想要解决上面的问题，我们就需要将 Markdown 转为富文本。

Google 搜索后，其实很快能在开源项目/软件中看到有很多优秀的实现方法 （世界可真美好！） ，比如 markdown-here、mdnice、typora 等等。通过以上这些服务 / 软件，在 Markdown 创作且排版好的内容便可以轻松转为富文本，并支持直接粘贴到公众号编辑器中，让排版样式得以保留。

左 / Markdown编辑器，右 / 粘贴到公众号的效果

主题 CSS 样式的修改

解决前面的问题后，其实还需要对 Markdown 主题 CSS 样式进行修改。毕竟上述服务的默认主题样式都太普通，并不完全适合自己的公众号。

CSS（层叠样式表），是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

Markdown 主题 CSS，其实就是决定 Markdown 编辑器里标题、字号、间距、颜色等排版样式的呈现，所以只要我把此前的排版习惯配置到 CSS 生成主题，便相当于一劳永逸地完成了排版工作，完全不需要再每次手动调整排版，即在 Markdown 软件边写作边排版。

CSS 部分截取

如果你负责的是品牌类公众号的内容创作，也可以直接把品牌的颜色/特征运用起来并写入 CSS，让排版风格更具独特性和不可模仿性，即既不普通也不像第三方编辑器那般俗套。

在多款服务 / 软件尝试后，我最终选择使用的服务是 mdnice 。除了能更好的实现上述两个需求，它还拥有稳定的图床，在其创作图文并茂的内容粘贴到微信公众号编辑器时都能完美显示（多数服务虽然也有图床可上传图片，但粘贴到公众号编辑器总会提示失败，需要手动逐个重新上传）。另外值得称赞的是它编辑界面主要分为三个区域，分别是：Markdown输入区、主题效果预览区、主题 CSS 区，让创作者能实时知道最终的排版效果：

mdnice 界面

▍微信公众号排版的建议

毫无疑问，内容重于排版，但好的排版，能让内容看起来更「舒服」。

在我看来，一个及格的排版需要考虑到使用设备、使用场景，所以微信公众号排版想达到及格线，就必须做到：

• 使用减压的排版：因为手机的屏幕比例相对细长，宽松舒适的排版会更利于阅读；

• 设计清晰的层级：手机阅读一般是纵向滑动，合理的层级设计，能让读者阅读时明确自己看到了什么位置。

针对这两个问题，我是这样做的：

说明：关于微信公众号排版，少数派作者 @马马马马马马克思 曾在有详细的讨论过，作者的观点和我基本一致，所以下方内容会稍有重复。

使用减压的排版

微信公众号的阅读时间是碎片化的。如果不能为读者提供一个舒适的阅读环境，减小读者的阅读压力或阅读成本，那往往就不会有把文章看完的意愿。

我会建议从这 4 个方向解决问题：

1.留白的页距、字距、行距、段落间距

在平面设计中，留白的意义在于给予设计呼吸的空间，提供布局上的平衡。留白区域的环绕与陪衬，良好的衬托出中心区域的表现。

而在阅读场景的留白，不仅可以更突出内容，还可以为读者减压，增强读者能持续阅读下去的耐心。

实际效果可以看看下方的对比：

左 / 未优化，右 / 已优化

从横向角度看，我给文章提供了更宽的页边距，让内容和屏幕边缘不再紧密挨凑，而是有了明显留白，让视觉上有了休息的空间。所以在自定义 CSS 样式时，我推荐将 margin 左右边距设置 6px。

页距对比

而在字距上则推荐将 letter-spacing 设置为 0.5px，略微调宽的字距能让字体相对不过于紧凑，减少阅读压力。

而从纵向角度看，我调整了行距和段落间距，其中我觉得最重要的是段落间距。因为考虑到手机滚动阅读的操作、从上到下的阅读习惯，段与段之间间距需要更加明显，方便阅读的定位。

段落间距对比

段落间距调整后，行距也需要随之调整，让段落之间和行之间的间距悬殊控制的合理的范围内。目前我在自定义 CSS 样式里，将 margin 上下边距设置 11px，行高 line-height 设置为 25px。

2.使用两端对齐

为了能使上述提到的页距效果最大化，我建议在正文使用两端对齐。倘若不使用，很容易造成文字的行尾形成不规则的锯齿状，通篇下来，会让阅读压力明显提升。

左 / 居左对齐，右 / 两端对齐

不过两端对齐也有个弊端，当遇到中英文、数字公式等内容时，两端对齐会为了「盲目」对齐，导致字间距被过渡放大，阅读起来也十分难受。我建议遇到这种状况时，可以选中该段路文本直接使用普通的居左对齐。

3.使用合理的字号

字号大小，是读者最能感知排版的存在，也是决定文章横向空间中显示字符数量的主要因素。

出版行业里有个术语叫 CPL，即较优的每行字符数（character per line），行业普遍采用的较为理想的数据是：每行字数在 40～50 个左右。

而在手机上，如果考虑到屏幕比例的细长和排版边距的调整，微信公众号文章的每行理想字数是 21 个左右，所以我推荐在自定义 CSS 样式里，将字体大小调整为 14～15px。至于多层级的标题大小，可以根据实际需要进行调整，但尽可能确保大小相差不要过大。

4.不使用绝对的色值

白纸黑字，在白色纸上写上黑色的字，看起来理所应当。可实际上，在电子屏幕阅读时，如果白色背景色采用纯黑的字体时，对比会十分强烈，不仅给人一种沉重感，还会造成不小的视觉疲劳。

左 / 纯黑，右 / #33333

解决的方法其实也很简单，不使用绝对的黑（即#00000），而是使用那些看起来像黑色但又不是纯黑的颜色，我自己比较倾向使用#333333来解决上述问题。

利用 Markdown 进行层级设计

合格的层级设计，能让用户清楚知道自己阅读到了哪里，不会觉得有看着看着迷路的错觉。我一般会用这两个方法避免：

1.不同层级不同样式

从我个人的习惯看，一篇文章的层级通常会有 2～3 个。想让层级更清晰，你可以使用模板、字体大小、位置、颜色等各种方法区分。

但我实在是觉得第三方编辑器模板插入麻烦，而且样式很俗套；专门设计的标题规范图片，每次插入又很麻烦，于是我选择在 CSS 主题中分别对它们的样式进行了简单的自定义：

这里的二级和三级区分不明显，还有很多优化空间

2.小节间插入较为明显的分割线

在每个小节结束时插入分割线，可以让读者明显感受到上下的内容将会有不同，而且也能告诉读者已经读完了一节内容。

不过微信公众号编辑器自带的分割线就是一条无法调整页距的线条，特别影响整体的视觉美观。所以我也在 CSS 主题中调整了分割线的页边距，并且添加了向中间过渡的渐变，让视觉看起来更舒服：

左 / 默认分割线，右 / 优化后

3.合理的加粗提醒

对于微信公众号文章的重点内容提醒，很多写作者经常会选中好几句连续的文字加粗换个亮色，虽然确实让他们和普通的文字产生明显的不同，但我觉得如果在一段文字里，有连续加粗换个亮色的重要句子，那就说明这段文字里就压根没有重点。

重点是指主要的，而不是指相对主要的。我在自定义的 CSS 样式里，为标重点做了两个形式：

1. 使用代码块，标注重要的专有名词 （因为我的创作上不涉及使用代码块写代码，所以和代码块本身的用法不存在冲突）

2. 使用纯黑加粗，区别于正文的非绝对黑色333333 （只对真正重要的句子加粗）

以上就是我对微信公众号排版自动化的尝试，对我个人工作而言，确实帮我提升了不少效率，至少让繁琐重复的排版调整工作离我远了不少，希望也能对屏幕前的你有所帮助！最后感谢 mdnice 开发者开发的服务，真的超赞。

原文链接：https://sspai.com/post/69926

作者 / 洛世

责编 / 广陵止息