如何在微信公衆號優雅的展現代碼

我在2017-04-25日開通了微信公衆號，嘗試着去分享一些技術文章，不可避免的文章裏面有不少的代碼，嘗試了不少的方法，如今算是找到了一個還不錯的解決方案，所以想把這個過程記錄下來。

剛開始前天然是在網上找了一番有什麼好的工具能夠支持，看了不少解決方案大概分爲下面幾種：

• 手動複製粘貼進去調一調格式
• 代碼製做成圖片
• 購買專業版工具導出爲微信公衆號格式
• 不少在線的編輯軟件
• markdown here
• 其它

爲何會這樣呢，最根本的緣由就是微信的公衆號不支持markdown的格式，好吧知乎也是，反正無論怎麼的你們都還的繼續用不是，就出來了不少的解決方案。並且微信的編輯器對代碼這塊支持也不夠，幸虧支持網頁直接複製你們就都利用這個機制去作工具。

排除的方案

先說說手動複製粘貼吧，原本的代碼是這個格式的：

@SpringBootApplication
@EnableDiscoveryClient
public class ProducerApplication {

    public static void main(String[] args) {
        SpringApplication.run(ProducerApplication.class, args);
    }
}

在微信中就會變成下面這樣，須要手動去敲回車，代碼量大了苦不堪言。

@SpringBootApplication@EnableDiscoveryClientpublic class ProducerApplication {
public static void main(String[] args) {
        SpringApplication.run(ProducerApplication.class, args);
    }
}

或者是代碼沒有擠在一塊兒，可是由於代碼比較寬，只顯示了半截，半截還在屏幕外面呢。

代碼轉化成圖片，最原始的就是用截屏工具一段一段的去截屏，想一想就痛苦，業內也有人寫了工具來支持，具體能夠參考這篇文章：html2canvas 將代碼轉爲圖片，可是圖片多了不少會影響頁面的打開速度，並且編輯的時候須要一段一段的上傳圖片也很複雜。

購買專業版工具導出爲微信公衆號格式這個方式我不喜歡，第一要花錢，第二每次須要在這個軟件中去處理，再導出也挺麻煩的；不少在線的編輯軟件，也是同樣進去都是花花碌碌的頁面，廣告賊多，有些還必須先註冊，體驗不好。

因此以上的幾種方式在一開始的時候就被我放棄了。

選擇方案

剛開始的時候就看到了markdown here這個款工具，感受算是體驗也不錯，也用了有一陣子了。我使用的是chrome瀏覽器，其它瀏覽器也有對應的插件，使用步驟以下：

• 在Google Chrome中安裝Markdown－here插件
• 在sublime中用Markdwon格式書寫
• 拷貝粘貼到微信公共賬號的編輯器中
• 點擊瀏覽器上的插件按鈕，使用Markdown－here渲染
• 插入圖片，修訂

也能夠自定義CSS，自定義代碼高亮的格式等等，可是它也有兩個致命的缺點：

• 以markdown格式粘貼進去以後，使用快捷鍵「CTRL+Ctrl+Alt+M」生成html後代碼格式也沒有問題，可是點擊保存以後不少代碼就會黏在一塊兒，什麼緣由呢？Markdown 解釋器在轉換代碼片斷時，沒有在換行的時候添加
  標籤，而是直接輸出一個換行符 \n，微信編輯頁在保存或者預覽時，將部分換行符給過濾了。
• 就算代碼格式正常，使用蘋果微信查看代碼的時候會被自動折行，效果不好。

第一個問題也有解決方案，網上有開源精神的朋友寫了插件來支持，具體能夠參考這篇文章：微信公衆號代碼區域換行問題（解決）,可是第二個問題仍是不能解決，而後我只能每次貼心的給推送的文章下面加這麼一句話：

蘋果手機代碼會折行，建議蘋果用戶點擊閱讀原文查看，效果會更好一些。

每次在公衆號下面去粘貼這一句，感受也挺傻X的。

我在網上查找解決方案的時候，偶然看到小鬍子哥做者寫了一個開源軟件:online-markdown,界面以下；

使用方式很簡單，將寫好的markdown格式的代碼直接複製粘貼到這個頁面裏面，點擊預覽就能夠看到渲染後的效果了，根據本身的須要也能夠在上面選擇不一樣的樣式和代碼高亮的格式，選完以後點擊複製，直接粘貼到微信公號的編輯器中既可，我試着用了一下效果不錯。

你們可使用這個地址來測試http://md.ityouknow.com/

可是仍是有一些小瑕疵，做者也會去完善，感興趣的能夠去github上面star一下。小瑕疵有兩個：

• 一、能夠選擇的樣式不是不少，只有三種，但若是你感興趣的話能夠本身去加
• 二、「- 」的格式轉換不是很好，會換行。我看有人已經提出來了，做者應該也會很快修復這個問題。

目前這個就是我選擇使用的方案了，也但願這個工具能夠幫助到你們。

若是你有更好的解決方案，也請必定告訴我。

個人公衆號是：純潔的微笑（KeepPureSmile），歡迎你們關注一塊兒交流。