如何在微信公眾號優雅的展示程式碼

純潔的微笑發表於2017-05-14

原文網址 : https://www.cnblogs.com/ityouknow/p/6851564.html

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

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