背景

一直以来，微信公众号排版都是一个重复性高、步骤繁琐、耗时长的苦活。直接复制粘贴到公众号编辑器后，各种字号不一致、段落间间距过短、代码块字号及缩进错乱等问题一直困扰着公众号的小编，不得不每次复制粘贴后花费数十分钟不断调整排版。因此趁着这段时间调研了下微信公众号排版与一般网页间的区别，简单加了一个一键生成排版的功能。

使用方法

在帖子右下角即可看到一键排版按钮（目前仅开放给帖子作者及社区管理员）：

点击后会打开新窗口，效果如下：

直接把新窗口中的所有内容全选并粘贴到微信公众号编辑器即可。

由于目前排版风格使用的是社区的排版风格（1-3 级标题 16px+ 蓝色，其它标题 16px+ 橙色，正文字号 14px，代码块字号 10px ），暂不支持自定义风格。后续根据此功能的使用情况再考虑如何增强。

已知问题

由于公众号对于代码着色的 <span> 标签存在不当处理，具有着色效果的代码块在粘贴后，无缩进的行会被自动合并到上一行末尾。不带有着色效果的代码块无此问题。
具体问题描述可查看：https://github.com/testerhome/homeland/issues/49

若大家使用中有其它问题，欢迎回帖或直接在 github 上提 issue ~

原理

• 排版错乱原因分析：

公众号编辑器直接粘贴后，部分 css 或部分功能会失效。目前已知的有：

• 超链接全部失效（但 css 格式不会丢失）
• div 标签全被干掉
• 代码块中若存在类似 </span>\n<span>（\n 为换行符，实际上效果为换行，不会看到 \n 这个符号），中间的 \n 会被干掉

同时公众号网页中有个默认的样式表，这个默认样式表和 chrome 等浏览器的默认样式有一定差异，因此在手机端浏览的效果会和电脑端预览的效果有一定差别。

大部分情况下，排版错乱都和 css 有关。所以解决思路也很简单：新建一个模板，css 针对微信公众号的样式表进行定制，确保样式在手机端浏览正常。

• 核心实现思路

1. 新建一个 layout 模板，针对微信排版生成具体页面。页面内容直接就是 topic 渲染后的 html 。
2. 新建一个 css 文件，针对微信内置的 css 样式进行调整，确保微信浏览器浏览效果符合排版需要。

具体代码变更大家可以查看：
https://github.com/testerhome/homeland/commit/c71c425639760e39c34e58f116e737fece428edd
https://github.com/testerhome/homeland/commit/b0433698e16f91d0bcd1445fa45535d8dd47e960

• 参考文档

在微信公众平台上用 Markdown 写作
利用 Markdown here 排版微信公众号