自制微信公众号一键排版工具

近日，几个码农因「写脚本」被开除了。要我说，不写点脚本那还叫码农吗。我最近也给自己写了一点小脚本，用于在微信公众号中生成个性排版。现在我把整个过程分享给大家。本文就是用这个小工具完成的哦。

操作过公众号后台的朋友肯定知道，微信的编辑器是很简易的，这也不叫缺陷吧，毕竟微信团队的主张一直就是简洁。但是这个编辑器是可以粘贴带格式的html的，所以就给我们留下了发挥的空间，我们可以自己写点css代码，从而定制一个个性的排版样式。对于一个前端工程师，写点样式还不是分分钟的事情~

用markdown写作

程序员最喜爱的写作语言当然是markdown了，它是一种比html更简洁的标记语言，通过工具可以编译为html以及pdf等各种格式。由于足够简洁，所以兼容性也是杠杠的，特别适合在移动端展示文章。

这里我选择用gulp进行任务控制，用gulp-remarkable来进markdown文件的编译。

编写html片段

首先我们要准备好自己写的html片段，css代码内联，用于替换编译生成的html。比如，我会将<h2>标签替换为以下的html

<p style="font-family: 微软雅黑, 宋体, tahoma, arial; margin: 8px 0px 8px; padding: 0px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(227, 227, 227); height: 32px; line-height: 18px;"><span style="font-family: 微软雅黑, sans-serif !important; font-size: 16px; color: #00BBEC; display: block; float: left; padding: 0px 2px 3px; line-height: 28px; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #00BBEC; font-weight: bold;" class="wxqq-color wxqq-borderBottomColor">标题</span></q>

除标题外，你也可以制作任意需要的代码片段，比如引用、表格、列表等等，md文件编译后统统进行替换就行。

代码高亮处理

码农写的文章，难免会嵌点代码来说明问题，但是在微信中排版代码是件头疼的事。要么是代码太长了排版错乱，要么就直接用图片展示代码，但是也有清晰度不够、无法复制等问题。

所以我选择用highlight.js来进行代码的格式化，在用remarkable编译md文件的时候，可以把highlight配置进去，这样一并完成了代码高亮工作。

需要注意的一个地方是，用highlight格式化后的代码在复制到微信编辑器的时候会丢失换行，需要我们额外处理一下，用正则把/n替换成<br>就可以了。

<pre>标签滚动处理

所谓滚动处理就是，在单行代码太长（超过屏幕宽度）的时候，会产生换行，代码就乱了，这是我们不愿意看到的。所以在进行替换的时候要给<pre>标签加上overflow-x:auto; white-space: nowrap;样式，这样能让代码框产生横向滚动条，读者可以滚动来查看未错乱的代码。