近日，幾個碼農因「寫指令碼」被開除了。要我說，不寫點指令碼那還叫碼農嗎。我最近也給自己寫了一點小指令碼，用於在微信公眾號中生成個性排版。現在我把整個過程分享給大家。本文就是用這個小工具完成的哦。
操作過公眾號後臺的朋友肯定知道，微信的編輯器是很簡易的，這也不叫缺陷吧，畢竟微信團隊的主張一直就是簡潔。但是這個編輯器是可以貼上帶格式的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格式化後的程式碼在複製到微信編輯器的時候會丟失換行，需要我們額外處理一下，用正則把
替換成<br>就可以了。
<pre>標籤滾動處理
所謂滾動處理就是，在單行程式碼太長（超過螢幕寬度）的時候，會產生換行，程式碼就亂了，這是我們不願意看到的。所以在進行替換的時候要給<pre>標籤加上overflow-x:auto; white-space: nowrap;樣式，這樣能讓程式碼框產生橫向滾動條，讀者可以滾動來檢視未錯亂的程式碼。
這樣比較長的程式碼看起來就是這個效果：
alert(12);
var test = "這是一段很長的文字這是一段很長的文字這是一段很長的文字這是一段很長的文字這是一段很長的文字";
function abc(){
alert("sdfsdf");
}
css內聯處理
使用hightlight.js的時候，需要引入一個主題的css檔案，比如我用的是monokai-submile.css。但是我們沒法把這個css檔案貼上到微信編輯器中，所以需要想辦法把這個css檔案給內聯到html程式碼中才行。
也就是說，要把css中定義的規則轉化為標籤的style屬性，我在網上搜羅了半天，找到一個名為juice的nodejs模組，幫助我完成了這個工作。用法也相當簡單，最終的nodejs程式碼如下
var htmlFile = `./articles/`+file+`.html`;
var cssFile = `./articles/monokai-sublime.css`;
var result = juice.juiceFile(htmlFile, {extraCss: fs.readFileSync(cssFile)}, function(err, html){
if(err){
console.log(err);
}
else{
var meta = `<meta charset="utf8" />`;
fs.writeFileSync(`./articles/`+file+`_html.html`, meta+html);
}
});
快速敲出裝逼引號「」
常寫文章的同學肯定很喜歡這個引號「」，它讓你的文章品質瞬間昇華了有木有。但是由於這個引號無法用鍵盤直接打出，只能通過輸入法的特殊符號來輸入，特別麻煩。
既然我們可以隨意對內容進行替換，那麼只需自己定義一個標籤就行，比如我定義了q標籤，後續用指令碼把這個標籤替換為「」即可。配合編輯器的emmet外掛，輸入這個裝逼引號只需敲p+tab，相當快捷，「你說呢」。
開始編譯吧
我目前進行的處理就以上這些了，當然如果你發揮腦洞的話，可以再做更多的工作哦。
萬事俱備，那我們就開始編譯吧。大致說一下我用到的東西，首先指令碼是用nodejs寫的，誰讓我是前端工程師呢呢~任務控制當然首選gulp，其次用到了gulp-replace、gulp-remarkable、gulp-rename、juice、highlight.js，就這些了。
把我們預先寫好的html片段定義成字串，然後就可以開始處理工作啦，我的parse任務定義如下
gulp.task(`parse`, function(){
gulp.src(`articles/`+file+`.md`)
.pipe(md({
preset: `full`,
disable: [`replacements`],
remarkableOptions: {
typographer: true,
breaks: true,
highlight: function (str, lang) {
if(lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(lang, str).value.replace(/
/g, `<br>`);
} catch (err) {}
}
try {
return hljs.highlightAuto(str).value.replace(/
/g, `<br>`);
} catch (err) {}
return ``;
}
}
}))
.pipe(name(function(path){
path.extname = `.html`;
}))
.pipe(replace(/<h2>(.*)</h2>/g, h2start+`$1`+h2end))
.pipe(replace(/<q>([^</p>]*)</q>/g, `「$1」`))
.pipe(replace(/<pre>/g, `<pre class="hljs" style="overflow-x: auto;">`))
.pipe(replace(/<mark>/g, `<mark style="background-color: #EEE; padding: 0 5px;">`))
.pipe(gulp.dest(`./articles`));
});
然後別忘了還有內聯css的任務，程式碼參見上面juice的使用。
為了能夠精準編譯某一個md檔案，我在執行gulp的時候給傳遞了一個file引數，執行命令為：gulp –file write-wx-article-tool。值就是我這篇文章的名稱啦。這個引數可以通過gulp.env.file拿到，就是你當前要處理的檔案。
命令執行完後，就會生成一個html檔案，你只需雙擊開啟，複製內容，然後在微信編輯器中ctrl+v即可。
結束
這就結束啦？當然，如果你有更多的想法，完全可以自己再去折騰。比如，編譯完成後，自動把內容放到系統剪貼簿中，自動開啟微信文章釋出頁，自動聚焦編輯器，自動執行ctrl+v指令。這下就真正變成「一鍵」了，爽乎？