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

操作過公眾號(hào)后臺(tái)的朋友肯定知道，微信的編輯器是很簡(jiǎn)易的，這也不叫缺陷吧，畢竟微信團(tuán)隊(duì)的主張一直就是簡(jiǎn)潔。但是這個(gè)編輯器是可以粘貼帶格式的html的，所以就給我們留下了發(fā)揮的空間，我們可以自己寫點(diǎn)css代碼，從而定制一個(gè)個(gè)性的排版樣式。對(duì)于一個(gè)前端工程師，寫點(diǎn)樣式還不是分分鐘的事情~

用markdown寫作

程序員最喜愛的寫作語(yǔ)言當(dāng)然是markdown了，它是一種比html更簡(jiǎn)潔的標(biāo)記語(yǔ)言，通過工具可以編譯為html以及pdf等各種格式。由于足夠簡(jiǎn)潔，所以兼容性也是杠杠的，特別適合在移動(dòng)端展示文章。

這里我選擇用gulp進(jìn)行任務(wù)控制，用gulp-remarkable來進(jìn)markdown文件的編譯。

編寫html片段

首先我們要準(zhǔn)備好自己寫的html片段，css代碼內(nèi)聯(lián)，用于替換編譯生成的html。比如，我會(huì)將<h2>標(biāo)簽替換為以下的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">標(biāo)題</span></q>

除標(biāo)題外，你也可以制作任意需要的代碼片段，比如引用、表格、列表等等，md文件編譯后統(tǒng)統(tǒng)進(jìn)行替換就行。

代碼高亮處理

碼農(nóng)寫的文章，難免會(huì)嵌點(diǎn)代碼來說明問題，但是在微信中排版代碼是件頭疼的事。要么是代碼太長(zhǎng)了排版錯(cuò)亂，要么就直接用圖片展示代碼，但是也有清晰度不夠、無(wú)法復(fù)制等問題。

所以我選擇用highlight.js來進(jìn)行代碼的格式化，在用remarkable編譯md文件的時(shí)候，可以把highlight配置進(jìn)去，這樣一并完成了代碼高亮工作。

需要注意的一個(gè)地方是，用highlight格式化后的代碼在復(fù)制到微信編輯器的時(shí)候會(huì)丟失換行，需要我們額外處理一下，用正則把\n替換成<br>就可以了。

<pre>標(biāo)簽滾動(dòng)處理

所謂滾動(dòng)處理就是，在單行代碼太長(zhǎng)（超過屏幕寬度）的時(shí)候，會(huì)產(chǎn)生換行，代碼就亂了，這是我們不愿意看到的。所以在進(jìn)行替換的時(shí)候要給<pre>標(biāo)簽加上overflow-x:auto; white-space: nowrap;樣式，這樣能讓代碼框產(chǎn)生橫向滾動(dòng)條，讀者可以滾動(dòng)來查看未錯(cuò)亂的代碼。

這樣比較長(zhǎng)的代碼看起來就是這個(gè)效果：

alert(12);
var test = "這是一段很長(zhǎng)的文字這是一段很長(zhǎng)的文字這是一段很長(zhǎng)的文字這是一段很長(zhǎng)的文字這是一段很長(zhǎng)的文字";
function abc(){
alert("sdfsdf");
}

css內(nèi)聯(lián)處理

使用hightlight.js的時(shí)候，需要引入一個(gè)主題的css文件，比如我用的是monokai-submile.css。但是我們沒法把這個(gè)css文件粘貼到微信編輯器中，所以需要想辦法把這個(gè)css文件給內(nèi)聯(lián)到html代碼中才行。

也就是說，要把css中定義的規(guī)則轉(zhuǎn)化為標(biāo)簽的style屬性，我在網(wǎng)上搜羅了半天，找到一個(gè)名為juice的nodejs模塊，幫助我完成了這個(gè)工作。用法也相當(dāng)簡(jiǎn)單，最終的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);
}
});

快速敲出裝逼引號(hào)「」

常寫文章的同學(xué)肯定很喜歡這個(gè)引號(hào)「」，它讓你的文章品質(zhì)瞬間升華了有木有。但是由于這個(gè)引號(hào)無(wú)法用鍵盤直接打出，只能通過輸入法的特殊符號(hào)來輸入，特別麻煩。

既然我們可以隨意對(duì)內(nèi)容進(jìn)行替換，那么只需自己定義一個(gè)標(biāo)簽就行，比如我定義了q標(biāo)簽，后續(xù)用腳本把這個(gè)標(biāo)簽替換為「」即可。配合編輯器的emmet插件，輸入這個(gè)裝逼引號(hào)只需敲p+tab，相當(dāng)快捷，「你說呢」。

開始編譯吧

我目前進(jìn)行的處理就以上這些了，當(dāng)然如果你發(fā)揮腦洞的話，可以再做更多的工作哦。

萬(wàn)事俱備，那我們就開始編譯吧。大致說一下我用到的東西，首先腳本是用nodejs寫的，誰(shuí)讓我是前端工程師呢呢~任務(wù)控制當(dāng)然首選gulp，其次用到了gulp-replace、gulp-remarkable、gulp-rename、juice、highlight.js，就這些了。

把我們預(yù)先寫好的html片段定義成字符串，然后就可以開始處理工作啦，我的parse任務(wù)定義如下

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(/\n/g, '<br>');
} catch (err) {}
}
try {
return hljs.highlightAuto(str).value.replace(/\n/g, '<br>');
} catch (err) {}
return '';
}
}
}))
.pipe(name(function(path){
path.extname = '.html';
}))
.pipe(replace(/<h2>(.*)<\/h2>/g, h2start+'$1'+h2end))
.pipe(replace(/&lt;q&gt;([^</p>]*)&lt;\/q&gt;/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'));
});

然后別忘了還有內(nèi)聯(lián)css的任務(wù)，代碼參見上面juice的使用。

為了能夠精準(zhǔn)編譯某一個(gè)md文件，我在運(yùn)行g(shù)ulp的時(shí)候給傳遞了一個(gè)file參數(shù)，運(yùn)行命令為：gulp --file write-wx-article-tool。值就是我這篇文章的名稱啦。這個(gè)參數(shù)可以通過gulp.env.file拿到，就是你當(dāng)前要處理的文件。

命令執(zhí)行完后，就會(huì)生成一個(gè)html文件，你只需雙擊打開，復(fù)制內(nèi)容，然后在微信編輯器中ctrl+v即可。

結(jié)束

這就結(jié)束啦？當(dāng)然，如果你有更多的想法，完全可以自己再去折騰。比如，編譯完成后，自動(dòng)把內(nèi)容放到系統(tǒng)剪貼板中，自動(dòng)打開微信文章發(fā)布頁(yè)，自動(dòng)聚焦編輯器，自動(dòng)執(zhí)行ctrl+v指令。這下就真正變成「一鍵」了，爽乎？

以上就是自制微信公眾號(hào)一鍵排版工具的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！

最新評(píng)論