自制微信公衆號一鍵排版工具

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

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

這樣比較長的代碼看起來就是這個效果：

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(/\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'));
});

而後別忘了還有內聯css的任務，代碼參見上面juice的使用。

爲了可以精準編譯某一個md文件，我在運行gulp的時候給傳遞了一個file參數，運行命令爲：gulp --file write-wx-article-tool。值就是我這篇文章的名稱啦。這個參數能夠經過gulp.env.file拿到，就是你當前要處理的文件。

命令執行完後，就會生成一個html文件，你只需雙擊打開，複製內容，而後在微信編輯器中ctrl+v便可。

結束

這就結束啦？固然，若是你有更多的想法，徹底能夠本身再去折騰。好比，編譯完成後，自動把內容放到系統剪貼板中，自動打開微信文章發佈頁，自動聚焦編輯器，自動執行ctrl+v指令。這下就真正變成「一鍵」了，爽乎？