近日，幾個碼農因「寫腳本」被開除了。要我說，不寫點腳本那還叫碼農嗎。我最近也給自己寫了一點小腳本，用于在微信公眾號中生成個性排版。現在我把整個過程分享給大家。本文就是用這個小工具完成的哦。

操作過公眾號后臺的朋友肯定知道，微信的編輯器是很簡易的，這也不叫缺陷吧，畢竟微信團隊的主張一直就是簡潔。但是這個編輯器是可以粘貼帶格式的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;樣式，這樣能讓代碼框產生橫向滾動條，讀者可以滾動來查看未錯亂的代碼。