如何在微信公眾號優雅的展示代碼 - ityouknow－IT工程師數位筆記本

文章出處

我在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，微信編輯頁在保存或者預覽時，將部分換行符給過濾了。
就算代碼格式正常，使用蘋果微信查看代碼的時候會被自動折行，效果很差。

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