和微信公衆號編輯器戰鬥的日子

做者：靈魂畫師牧碼

本文提到的 Markdown Nice 體驗地址：mdnice.com

公元 2019 年，微信公衆號排版能力孱弱，始終爲運營者所詬病，秀米、135 編輯器等工具割據一方。

但不管是微信原生工具，仍是其餘編輯器，都讓創做者不得不將有限的創做經歷分散到排版設計上。

Markdown 解決排版的靈丹妙藥，應運而生。

1、引子

1.1 Markdown 是什麼？

Markdown 是一種排版語法，擁有極簡的輸入方式和極低的學習成本。

富含了標題、引用、加粗、連接、圖片、代碼段、公式等一切在文字創做中須要的排版格式。

擁有它，讓人專一於內容自己，而不被格式所打擾。

1.2 怎麼和微信公衆號結合？

這麼優秀的排版語法，但是微信公衆號也不支持呀。

別急！Markdown Nice 來幫你解決問題！

1.3 Markdown Nice 是什麼？

一款開源 Markdown 編輯器，寫完後即排版成功，複製便可粘貼到微信公衆號。

So what？ 只有這點麼？

固然不是！Nice寶寶你還有什麼特性呀？

• 支持圖牀、腳註、代碼、公式
• 支持 8 種排版主題和 7 種代碼主題
• 支持自定義樣式，可提交主題供人瞻仰
• 除了公衆號外，還支持知乎、掘金、博客園和CSDN等平臺
• 我顏值高呀

這麼多優秀的特性擺在你面前，還在等什麼？

地址：https://mdnice.com

快讓你的微信排版 Nice 起來！

2、正文

沒想到你還在看

咳咳、、、

不要小看Nice寶寶我，爲了可以使用 Markdown 進行公衆號排版，我但是和微信公衆號編輯器作了半年的鬥爭，才贏得了如今的戰果！

想聽聽我是如何戰鬥的？下面且聽我娓娓道來！

2.1 戰鬥序章

微信公衆號編輯器源於百度 FEX 前端團隊的開源的 ueditor 項目，這但是寶寶我扒取了網頁代碼發現的，如圖所示：

由於 ueditor 是富文本編輯器，因此我即將面臨的是 markdown->富文本 的轉換戰役，在開源界或者軟件界這種轉換戰役有了至關多的優秀實現。好比：

• Web端：editor.md、mavonEditor
• PC端：typora、MWeb

可是上述工具都存在一個問題，沒有很好地將 CSS 樣式融入富文本中，進而適配微信編輯器，以致於國內其餘各大平臺的富文本編輯器。

那麼有沒有嘗試彌補這一問題的工具呢？實際上是有的：

• Web端：md2all、wechat-format
• 瀏覽器插件：markdown-here

可是上述工具也各自有不完美的地方，因而Nice寶寶我發現了這個契機，把本身生產了出來，解決一切不完美！

Markdown Nice 是一個開源項目，由不少開源技術合體而成，其中主要包括：

• React：facebook 開源的 js 視圖層框架
• markdown-it：markdown 轉換富文本解析器
• juice：將 CSS 類選擇器轉換爲行內樣式的工具
• codemirror：網頁代碼編輯器
• ant-design：React UI組件庫
• mobx：狀態管理庫
• highlight.js：代碼高亮庫
• MathJax-node：公式轉圖片庫
• axios、ali-oss、qiniu-js等

注：下文會提到上述某些開源庫，開源庫具體做用請參考此處。

在擁有上述技術傍身以後，我向微信編輯器宣戰，打響了戰鬥第一槍！

2.2 戰鬥第一槍：代碼主題

微信公衆號在2018年之前，是徹底不支持代碼塊的，目前的支持也很單一，而且存在代碼字體較大的問題。

說來很氣，微信公衆號編輯器的開發者，就木有想過代碼塊對程序員羣體是多麼重要麼？？

爲此我找來了highlight.js代碼高亮神器，幫助解決代碼主題單一的問題。

通過必定的篩選後，最終選定了 atom-one-dark、atom-one-light、monikai、GitHub、vs201五、xcode 和微信代碼主題共 7 個代碼樣式供你們選擇。

其中微信代碼主題因爲其不屬於highlight.js的歸屬範疇，故而其結構須要從微信公衆號編輯器源碼中獲取，下面兩張圖展現瞭如何獲取：

而 highlight.js 與 markdown-it 解析器是關聯使用的，故而工具中存在 2 個 markdown 解析器，分別用於解析微信代碼主題和其餘代碼主題，源碼參考。

除了上述問題外，不少技術類公衆號代碼中會存在：一行代碼過長致使的多行顯示問題。

該問題使用如下 CSS 代碼便可解決：

pre code {
display: -webkit-box !important
}
複製代碼

對比效果如圖所示：

今後之後使用 Markdown Nice 的同志們代碼更美觀啦！

2.3 戰鬥第二槍：圖片上傳

一篇好的文章怎麼能夠沒有圖片？

（某些技術人員說：個人就沒有）

圖片管理是每個成熟編輯器都會遇到的問題。

Nice 寶寶最開始使用 SM.MS 圖牀，該圖牀由一位大佬在運維，很是感謝！

使用該圖牀雖然可以上傳圖片，可是粘貼到微信編輯器時，失敗率極高（想踩死微信編輯器），如圖所示：

真是{喜聞樂見|hē hē hē hē}呀！

爲了解決上述問題，Markdown Nice 前後支持了自定義阿里雲和七牛雲圖牀，經過購買阿里雲和七牛雲的服務使用自建圖牀。

可是！讓使用者本身配置，儘管有配置文檔，可是整個配置過程複雜無比，簡直慘絕人寰！

因而，Nice 寶寶又使用本身的帳號，自建圖牀，設定保存時間爲一天，提供臨時排版使用的 mdnice 圖牀。至此，工具中的圖片上傳支持狀況以下：

圖牀	費用	有效期	失敗率
mdnice	免費	1天	低
SM.MS	免費	長期	高
阿里雲	參考	自定義	低
七牛雲	10G免費	自定義	低

這場圖牀的戰役中，最大的難度在於須要閱讀阿里雲 OSS 和七牛雲 KODO 的文檔，而且使用其開源出來的工具包 ali-oss 和 qiniu-js 。

這其中又涉及到了 FormData、file對象、base64 和 blob 之間的神奇轉換，源碼參考。

總之，這場戰鬥打的不亦樂乎。

2.4 戰鬥第三槍：數學公式

微信公衆號排版中，數學公式是一個噩夢！

由於微信編輯器作了如下三件事情：

• 不支持公式編輯
• 不支持 html 和 css 生成的公式，由於字體沒法導入
• 不支持 svg，放入後提示失敗

這三件事情簡直像魔鬼的步伐，把公式需求者放在光滑的地板上摩擦、摩擦....

目前惟一可行的方案就是將公式轉換成圖片，再將圖片直接貼到公衆號裏，Nice寶寶以爲本身這個想法簡直是完美！

可是，怎麼作呢......

突然靈機一動，想到了朋友曾經推薦的一個轉換公式網站 codecogs，這個網站可以作到將任意公式轉換成png圖片並給出可訪問連接。

可是因爲圖片穩定性，沒法直接使用該連接，會存在和第二場戰役同樣，圖片粘貼失敗的狀況，讓人苦不堪言。

• 這個問題該怎麼解決呢？若是可以自建公式轉png圖片服務就行了。
• 有沒有這樣的開源庫？有！MathJax-node 就能夠！

因而Nice寶寶自建後臺服務，封裝 RESTful 接口供前端調用，實現了公式轉圖片的功能！通過測試，徹底可使用，粘貼後再根據排版狀況調整圖片大小便可。

其中對於大量公式的轉換，前端合理使用了異步請求，並不是一個個轉換而是並行執行，性能上達到了10個公式也能2秒轉換完畢的效果，徹底可用於公式排版。

2.5 戰鬥第四槍：微信外鏈轉腳註

衆所周知（不知道也得知道），微信不支持外鏈，除了域名爲https://mp.weixin.qq.com/的合法連接外，其餘的連接出現後都會被自動刪除。

而添加外鏈的惟一官方方式就是在閱讀全文處，固然，直接將連接自己放到文中或者製做二維碼圖片也是能夠的選擇。

而 Nice 寶寶則提供了將微信外鏈轉爲腳註的方式解決該問題，是否是很優雅呢？

其中連接和腳註的使用區別以下：

連接：[文字](連接 "文字")
腳註：[文字](腳註解釋 "腳註名字")
複製代碼

這裏又涉及到了一個常見的問題，就是不少公衆號做者的文章中，原來在其餘平臺發佈時都是連接，而到這裏排版時須要進行挨個修改，實在是讓人頭大。

因而Nice寶寶我又作了一個小改進，就是在粘貼文章的時候會自動監測是否存在外鏈，並提示做者是否一鍵轉成腳註，這樣就沒必要手工修改了，贊不讚！

2.6 戰役總結

和微信公衆號編輯器對抗，是個極其有意思的過程。除了上述提到的問題以外，還有不少的細節點須要注意，在此就不一一討論了，感興趣歡迎閱讀源碼。

Markdown Nice 的戰鬥之旅還遠遠沒有結束，官網製做、瀏覽器插件、本地工具和排版糾正等功能蓄勢待發。

3、談點和戰鬥無關的

3.1 設計理念

大多數人而言，內容重於排版，排版重於設計。

內容是吸引讀者的核心，因此最重要。

而排版與設計之間的比較，做爲一個曾經的微信美術編輯，隨着排版經驗的增多，發現文章的效果並不在於額外的花邊、點綴。

整齊、舒服、簡單是硬道理!

3.2 內容、排版與設計

設計 = 排版 + 創意

---

由於：大多數人不會獲取創意，或認爲創意成本太高。

因此：大多數人不作設計，富文本設計不適合單純的內容編輯者。

---

雖然：大多數人也不會排版，或認爲排版成本太高。

可是：Markdown Nice 將用戶從排版中釋放出來，只關注內容自己。

3.3 關於開源

開源是個既簡單又困難的過程：

• 說簡單是由於：筆記、書單、工具、平臺全部有價值的東西均可以在 GitHub 中輸出，作起來很簡單
• 說困難是由於：努力作到對別人有價值，始終堅持輸出，作起來很困難

正如上面描述的那樣，作開源實際上是在作一款產品，有多是技術產品（好比 redis、ant design），也有多是業務產品（好比 Markdown Nice），只有作好了纔可能對別人產生價值。

作產品的過程曲折而漫長，對照 Markdown Nice 開發過程，能夠看到如下的步驟：

1. 要有一個 idea，而且驗證其可行性和必要性，去和同類產品比較，作到心中有數
2. 抓住痛點，掌握核心價值，站在用戶角度思考，多聽反饋意見
3. 螺旋上升，不斷迭代，產出精品
4. 最最重要一點，作產品不僅要寫代碼，還要宣傳呀！！酒香也怕巷子深！！

參與開源，一路走來，甚是不易，望君珍惜。

最後，感謝每一位開源參與者，歡迎更多人蔘與到開源中來，還有好多代碼等着有人來寫呢！

『講解開源項目系列』——讓對開源項目感興趣的人再也不畏懼、讓開源項目的發起者再也不孤單。跟着咱們的文章，你會發現編程的樂趣、使用和發現參與開源項目如此簡單。歡迎留言聯繫咱們、加入咱們，讓更多人愛上開源、貢獻開源～