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

認識Markdown

Markdown是一種輕量級標記語言，它允許人們使用易讀易寫的純文字格式編寫文件，然後轉換成有效的HTML文件。

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

# 這是 H1 一級標題
## 這是H2 二級標題
### 這是H3 三級標題

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

if (request.getType == 1) {
  // 交給物件A處理
}else if (request.getType == 2) {
  // 交給物件B處理     
}else if (request.getType == 3) {
  // 交給物件C處理    
}else {
  // 不做任何處理
}

關於Markdown具體的使用，可以參考下面這篇文章：

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

Windows平臺

Mac平臺

• Mou

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

對於沒有程式設計基礎的人，這似乎是很難做到的，但我還是建議你學習一下簡單的css、html的相關知識，記得簡單學一下就可以了。為什麼簡單學習一些就可以了呢？因為好多公眾號上面的樣式都是可以直接copy過來的。下面通過一個簡單的例子告訴大家如何去copy別人現成的樣式。

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

用Chrome瀏覽器開啟剛才匯出的html檔案，另外也選擇用文字編輯器(比如Sublime Text)開啟html檔案，方便你修改與查詢html原始碼。

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

樣式就是標題居中、帶下劃線、有張背景圖，怎麼copy呢？很簡單的，點選滑鼠右鍵選擇檢查，就會看到如下圖的內容：

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

取消掉後，我們會發現標題後面的背景圖消失了，就證明了我們的猜測。採用同樣的方法可以找到border-bottom就是標題的下劃線，color就是標題的顏色。

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

<h3>repo換源</h3>

改成如下：

<section><h3>repo換源</h3></section>

這就相當於完成步驟2中1紅色區域的部分了，把h3標題放在section塊中。再找到h3樣式標記，如下所示：

h3 {
  font-size: 18px; }

改成如下：

section {
  display: block;
  text-align: center; }

h3 {
  font-size: 18px;
  color: #3c70c6; 
  border-bottom: 2px solid #1b5fa0;
  text-align: center;
  display: inline-block;}

修改完成後，點選儲存，重新整理用Chrome開啟的頁面，效果如下：

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

如何將html原始碼轉換成富文字呢？

想要在微信公眾號上正確地顯示調好樣式的文章，我們還需要將html原始碼轉換成富文字，怎麼進行轉換呢？開啟WangEditor，然後點選原始碼，把html原始碼貼上到這裡，然後在點選原始碼就能夠讓html原始碼轉換成富文字了。如下圖所示：

轉換後的效果如下：

最後，也是最重要的一步，複製全部的富文字，貼上到微信公眾號後臺，然後傳送到自己手機上進行預覽，看下調整好的樣式在手機上能否正確顯示，因為微信公眾號對部分css樣式是不支援的，這個就需要自己不斷進行除錯了。分享一下自己遇到的兩個坑：

• 程式碼塊顯示不正確，沒有背景色，字型顏色也沒有發生變化。
• 無序列表和有序列表行與行之間沒有空隙。

如圖所示：

針對程式碼塊顯示不正確，查了許多資料，最後發現採用Markhere中程式碼塊的css樣式可以把這個問題給完美解決，css樣式如下：

pre, code {
  font-size: 0.85em;
  font-family: Consolas, Inconsolata, Courier, monospace; }

code {
  margin: 0 0.15em;
  padding: 0 0.3em;
  white-space: pre-wrap;
  border: 1px solid #EAEAEA;
  background-color: #323232;
  border-radius: 3px;
  display: inline; }

pre {
  font-size: 1em;
  line-height: 1.2em; }

pre code {
  background-color: #323232;
  color: #5baceb;
  white-space: pre;
  overflow: auto;
  border-radius: 3px;
  border: 1px solid #CCC;
  padding: 0.5em 0.7em;
  display: block !important; }

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

li {
  margin: 0.5em 0; }

# 改成如下
li {
  margin: 0.5em 0;
  font-size: 14px; }

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

如何用程式實現html樣式自動轉換呢？

前面我們已經完成了樣式的全部調整，如果每篇文章都調整一次樣式，對我們來說也是很浪費時間的，我們可以用程式自動來處理樣式的調整，程式的核心思想就是replace(替換)。在進行替換前，首先要把html裡面的原始碼讀取出來並轉換成字串的形式，使用Java語言中對檔案的操作即可做到這一點，程式碼如下：

File file = new File("/Users/Bruce/Desktop/good.html");
StringBuilder fileContents = new StringBuilder((int)file.length());
Scanner scanner = new Scanner(file);
String lineSeparator = System.getProperty("line.separator");

try {
  while(scanner.hasNextLine()) {
    fileContents.append(scanner.nextLine() + lineSeparator);
  }
  System.out.println(fileContents.toString());
} finally {
  scanner.close();
}

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

其他

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

總結

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

參考文章以及下載地址

國士梅花

歡迎大家關注國士梅花，技術路上與你陪伴。