經(jīng)常寫文章的人，會發(fā)現(xiàn)微信公眾號自帶的編輯器不是很好用，用它來排版一篇寫好的文章，往往要花費一兩個小時，浪費了大量的時間，最后的排版效果也不是那么好。本篇文章將介紹如何利用markdown、css、html來排版出自己微信公眾號的樣式，排版時間只需要幾秒鐘就可以完成。

認(rèn)識Markdown

Markdown是一種輕量級標(biāo)記語言，它允許人們使用易讀易寫的純文本格式編寫文檔，然后轉(zhuǎn)換成有效的HTML文檔。

Markdown的語法很簡單，學(xué)習(xí)5-10分鐘就可以熟練使用了。比如：

Markdown對代碼塊的處理也非常好，如下所示：

關(guān)于Markdown具體的使用，可以參考下面這篇文章：

正是由于Markdown使用比較簡單，能夠讓我們把更多的精力投入到文章的內(nèi)容上，而不是浪費在排版上面。下面給大家推薦幾款免費的Markdown編輯器，如下：

Windows平臺

Mac平臺

如何利用css、html來排版呢？

對于沒有編程基礎(chǔ)的人，這似乎是很難做到的，但我還是建議你學(xué)習(xí)一下簡單的css、html的相關(guān)知識，記得簡單學(xué)一下就可以了。為什么簡單學(xué)習(xí)一些就可以了呢？因為好多公眾號上面的樣式都是可以直接copy過來的。下面通過一個簡單的例子告訴大家如何去copy別人現(xiàn)成的樣式。

第一步：把剛才用markdown寫好的文章，通過編輯器導(dǎo)出成html格式，保存在本地。以Mou為例如下圖：

1-1 export.png

用Chrome瀏覽器打開剛才導(dǎo)出的html文件，另外也選擇用文本編輯器(比如Sublime Text)打開html文件，方便你修改與查找html源碼。

第二步：把你想copy樣式的公眾號中的一篇文章，在電腦上用Chrome瀏覽器給打開。比如你想拷貝這樣一個樣式，如下圖：

1-2 copystyle.png

樣式就是標(biāo)題居中、帶下劃線、有張背景圖，怎么copy呢？很簡單的，點擊鼠標(biāo)右鍵選擇檢查，就會看到如下圖的內(nèi)容：

1-3 check.png

1-4 check2.png

重點看我用紅線畫出的區(qū)域，從1紅色區(qū)域我們可以看出文章標(biāo)題那塊使用了兩個html標(biāo)記：section與span，section可以理解為一個塊，一個區(qū)域，span就可以理解為一個文字塊，用來填寫文字的。理解了這些，在看2紅色區(qū)域里面有一個background后面自帶url，就可以猜測應(yīng)該就是標(biāo)題后面的背景圖了，為了驗證下，我們background前面的復(fù)選框給取消掉，如下圖所示：

1-5 check3.png

取消掉后，我們會發(fā)現(xiàn)標(biāo)題后面的背景圖消失了，就證明了我們的猜測。采用同樣的方法可以找到border-bottom就是標(biāo)題的下劃線，color就是標(biāo)題的顏色。

第三步：到這一步，你已經(jīng)知道了如何去查看別人的樣式了，那如何讓自己的標(biāo)題也變成這個樣式呢？舉個例子，比如把h3標(biāo)題(三級標(biāo)題)變成剛才的樣式。在Sublime Text先找到h3標(biāo)記，如下所示：

改成如下：

這就相當(dāng)于完成步驟2中1紅色區(qū)域的部分了，把h3標(biāo)題放在section塊中。再找到h3樣式標(biāo)記，如下所示：

改成如下：

修改完成后，點擊保存，刷新用Chrome打開的頁面，效果如下：

1-6 check4.png

通過剛才的3個步驟，基本上知道了如何去copy別人的樣式，剩下的就是多試幾次，最終調(diào)出你想要的樣式。本人微信公眾號樣式源碼會在文章末尾提供一個鏈接供大家去下載。

如何將html源碼轉(zhuǎn)換成富文本呢？

想要在微信公眾號上正確地顯示調(diào)好樣式的文章，我們還需要將html源碼轉(zhuǎn)換成富文本，怎么進行轉(zhuǎn)換呢？打開WangEditor，然后點擊源碼，把html源碼粘貼到這里，然后在點擊源碼就能夠讓html源碼轉(zhuǎn)換成富文本了。如下圖所示：

1-7 check5.png

轉(zhuǎn)換后的效果如下：

1-8 check6.png

最后，也是最重要的一步，復(fù)制全部的富文本，粘貼到微信公眾號后臺，然后發(fā)送到自己手機上進行預(yù)覽，看下調(diào)整好的樣式在手機上能否正確顯示，因為微信公眾號對部分css樣式是不支持的，這個就需要自己不斷進行調(diào)試了。分享一下自己遇到的兩個坑：

• 代碼塊顯示不正確，沒有背景色，字體顏色也沒有發(fā)生變化。

• 無序列表和有序列表行與行之間沒有空隙。

如圖所示：

1-9 check7.jpeg

針對代碼塊顯示不正確，查了許多資料，最后發(fā)現(xiàn)采用Markhere中代碼塊的css樣式可以把這個問題給完美解決，css樣式如下：

針對列表的問題，只需要把樣式改成如下：

注意：樣式全部顯示正確后，要記錄下自己都修改了哪些樣式，在后面將會用程序來自動進行替換的。

如何用程序?qū)崿F(xiàn)html樣式自動轉(zhuǎn)換呢？

前面我們已經(jīng)完成了樣式的全部調(diào)整，如果每篇文章都調(diào)整一次樣式，對我們來說也是很浪費時間的，我們可以用程序自動來處理樣式的調(diào)整，程序的核心思想就是replace(替換)。在進行替換前，首先要把html里面的源代碼讀取出來并轉(zhuǎn)換成字符串的形式，使用Java語言中對文件的操作即可做到這一點，代碼如下：

代碼中特別要注意把行的分隔符給取出來，然后拼接在每讀取一行的后面，這樣保證在轉(zhuǎn)換的過程中換行符不會丟失，否則有可能在微信公眾號上顯示不正確，比如代碼塊的顯示。完整的轉(zhuǎn)換程序，會在文章末尾提供鏈接地址供大家下載。

其他

在寫這篇文章之前，上網(wǎng)找到了不少免費的微信公眾號編輯器，基本上都是提供了一些模板來讓你進行選擇，比如96微信編輯器，不能夠提供對Markdown文本進行轉(zhuǎn)換的。最后找到一款MarkEditor軟件，可以把Markdown文本轉(zhuǎn)換成微信公眾號的樣式，但是這款軟件是收費的，就放棄了。最重要的一點是這些軟件提供的樣式不是自己喜歡的，所以才有了這篇文章的出現(xiàn)。技術(shù)人就應(yīng)該用技術(shù)來讓自己的生活變得更美好哈。

總結(jié)

技術(shù)是用來服務(wù)生活的，作為一名技術(shù)人員，我們應(yīng)該用技術(shù)的思維去讓我們的生活更美好，應(yīng)該培養(yǎng)自己的技術(shù)思維去解決現(xiàn)實生活中碰到的問題，也許你恰好解決大家生活中普遍遇到的問題，并且還沒有人用技術(shù)來解決此問題，那么恭喜你了，你就可以讓自己手中的技術(shù)變現(xiàn)，也可以找到自己的一個創(chuàng)業(yè)方向了。言歸正傳，本文的思路如下圖所示：

1-10 mind.png