相關(guān)學習推薦：微信公眾號開發(fā)教程

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

但無論是微信原生工具，還是其他編輯器，都讓創(chuàng)作者不得不將有限的創(chuàng)作經(jīng)歷分散到排版設(shè)計上。

Markdown 解決排版的靈丹妙藥，應(yīng)運而生。

一、引子

1.1 Markdown 是什么？

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

富含了標題、引用、加粗、鏈接、圖片、代碼段、公式等一切在文字創(chuàng)作中需要的排版格式。

擁有它，讓人專注于內(nèi)容本身，而不被格式所打擾。

1.2 怎么和微信公眾號結(jié)合？

這么優(yōu)秀的排版語法，可是微信公眾號也不支持呀。

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

1.3 Markdown Nice 是什么？

一款開源 Markdown 編輯器，寫完后即排版成功，復(fù)制即可粘貼到微信公眾號。

So what？ 只有這點么？

當然不是！Nice寶寶你還有什么特性呀？

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

這么多優(yōu)秀的特性擺在你面前，還在等什么？

地址：https://mdnice.com

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

二、正文

沒想到你還在看

咳咳、、、

不要小看Nice寶寶我，為了能夠使用 Markdown 進行公眾號排版，我可是和微信公眾號編輯器做了半年的斗爭，才贏得了現(xiàn)在的戰(zhàn)果！

想聽聽我是如何戰(zhàn)斗的？下面且聽我娓娓道來！

2.1 戰(zhàn)斗序章

微信公眾號編輯器源于百度 FEX 前端團隊的開源的 ueditor 項目，這可是寶寶我扒取了網(wǎng)頁代碼發(fā)現(xiàn)的，如圖所示：

因為 ueditor 是富文本編輯器，所以我即將面臨的是 markdown->富文本 的轉(zhuǎn)換戰(zhàn)役，在開源界或者軟件界這種轉(zhuǎn)換戰(zhàn)役有了相當多的優(yōu)秀實現(xiàn)。比如：

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

但是上述工具都存在一個問題，沒有很好地將 CSS 樣式融入富文本中，進而適配微信編輯器，以至于國內(nèi)其他各大平臺的富文本編輯器。

那么有沒有嘗試彌補這一問題的工具呢？其實是有的：

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

但是上述工具也各自有不完美的地方，于是Nice寶寶我發(fā)現(xiàn)了這個契機，把自己生產(chǎn)了出來，解決一切不完美！

Markdown Nice 是一個開源項目，由很多開源技術(shù)合體而成，其中主要包括：

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

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

在擁有上述技術(shù)傍身之后，我向微信編輯器宣戰(zhàn)，打響了戰(zhàn)斗第一槍！

2.2 戰(zhàn)斗第一槍：代碼主題

微信公眾號在2018年以前，是完全不支持代碼塊的，目前的支持也很單一，并且存在代碼字體較大的問題。

說來很氣，微信公眾號編輯器的開發(fā)者，就木有想過代碼塊對程序員群體是多么重要么？？

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

經(jīng)過一定的篩選后，最終選定了 atom-one-dark、atom-one-light、monikai、GitHub、vs2015、xcode 和微信代碼主題共 7 個代碼樣式供大家選擇。

其中微信代碼主題由于其不屬于highlight.js的歸屬范疇，故而其結(jié)構(gòu)需要從微信公眾號編輯器源碼中獲取，下面兩張圖展示了如何獲?。?/p>

而 highlight.js 與 markdown-it 解析器是關(guān)聯(lián)使用的，故而工具中存在 2 個 markdown 解析器，分別用于解析微信代碼主題和其他代碼主題，源碼參考。

除了上述問題外，很多技術(shù)類公眾號代碼中會存在：一行代碼過長導(dǎo)致的多行顯示問題。

該問題使用以下 CSS 代碼即可解決：

pre?code?{display:?-webkit-box?!important}復(fù)制代碼

對比效果如圖所示：

從此以后使用 Markdown Nice 的同志們代碼更美觀啦！

2.3 戰(zhàn)斗第二槍：圖片上傳

一篇好的文章怎么可以沒有圖片？

（某些技術(shù)人員說：我的就沒有）

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

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

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

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

為了解決上述問題，Markdown Nice 先后支持了自定義阿里云和七牛云圖床，通過購買阿里云和七牛云的服務(wù)使用自建圖床。

但是！讓使用者自己配置，盡管有配置文檔，但是整個配置過程復(fù)雜無比，簡直慘絕人寰！

于是，Nice 寶寶又使用自己的賬號，自建圖床，設(shè)定保存時間為一天，提供臨時排版使用的 mdnice 圖床。至此，工具中的圖片上傳支持情況如下：

這場圖床的戰(zhàn)役中，最大的難度在于需要閱讀阿里云 OSS 和七牛云 KODO 的文檔，并且使用其開源出來的工具包 ali-oss 和 qiniu-js 。

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

總之，這場戰(zhàn)斗打的不亦樂乎。

2.4 戰(zhàn)斗第三槍：數(shù)學公式

微信公眾號排版中，數(shù)學公式是一個噩夢！

因為微信編輯器做了以下三件事情：

• 不支持公式編輯
• 不支持 html 和 css 生成的公式，因為字體無法導(dǎo)入
• 不支持 svg，放入后提示失敗

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

目前唯一可行的方案就是將公式轉(zhuǎn)換成圖片，再將圖片直接貼到公眾號里，Nice寶寶覺得自己這個想法簡直是完美！

但是，怎么做呢......

忽然靈機一動，想到了朋友曾經(jīng)推薦的一個轉(zhuǎn)換公式網(wǎng)站 codecogs，這個網(wǎng)站能夠做到將任意公式轉(zhuǎn)換成png圖片并給出可訪問鏈接。

但是由于圖片穩(wěn)定性，無法直接使用該鏈接，會存在和第二場戰(zhàn)役一樣，圖片粘貼失敗的情況，讓人苦不堪言。

• 這個問題該怎么解決呢？如果能夠自建公式轉(zhuǎn)png圖片服務(wù)就好了。
• 有沒有這樣的開源庫？有！MathJax-node 就可以！

于是Nice寶寶自建后臺服務(wù)，封裝 RESTful 接口供前端調(diào)用，實現(xiàn)了公式轉(zhuǎn)圖片的功能！經(jīng)過測試，完全可以使用，粘貼后再根據(jù)排版情況調(diào)整圖片大小即可。

其中對于大量公式的轉(zhuǎn)換，前端合理使用了異步請求，并非一個個轉(zhuǎn)換而是并行執(zhí)行，性能上達到了10個公式也能2秒轉(zhuǎn)換完畢的效果，完全可用于公式排版。

2.5 戰(zhàn)斗第四槍：微信外鏈轉(zhuǎn)腳注

眾所周知（不知道也得知道），微信不支持外鏈，除了域名為https://mp.weixin.qq.com/的合法鏈接外，其他的鏈接出現(xiàn)后都會被自動刪除。

而添加外鏈的唯一官方方式就是在閱讀全文處，當然，直接將鏈接本身放到文中或者制作二維碼圖片也是可以的選擇。

而 Nice 寶寶則提供了將微信外鏈轉(zhuǎn)為腳注的方式解決該問題，是不是很優(yōu)雅呢？

其中鏈接和腳注的使用區(qū)別如下：

鏈接：[文字](鏈接?"文字")
腳注：[文字](腳注解釋?"腳注名字")復(fù)制代碼

這里又涉及到了一個常見的問題，就是很多公眾號作者的文章中，原來在其他平臺發(fā)布時都是鏈接，而到這里排版時需要進行挨個修改，實在是讓人頭大。

于是Nice寶寶我又做了一個小改進，就是在粘貼文章的時候會自動監(jiān)測是否存在外鏈，并提示作者是否一鍵轉(zhuǎn)成腳注，這樣就不必手工修改了，贊不贊！

2.6 戰(zhàn)役總結(jié)

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

Markdown Nice 的戰(zhàn)斗之旅還遠遠沒有結(jié)束，官網(wǎng)制作、瀏覽器插件、本地工具和排版糾正等功能蓄勢待發(fā)。

三、談點和戰(zhàn)斗無關(guān)的

3.1 設(shè)計理念

大多數(shù)人而言，內(nèi)容重于排版，排版重于設(shè)計。

內(nèi)容是吸引讀者的核心，所以最重要。

而排版與設(shè)計之間的比較，作為一個曾經(jīng)的微信美術(shù)編輯，隨著排版經(jīng)驗的增多，發(fā)現(xiàn)文章的效果并不在于額外的花邊、點綴。

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

3.2 內(nèi)容、排版與設(shè)計

設(shè)計 = 排版 + 創(chuàng)意

因為：大多數(shù)人不會獲取創(chuàng)意，或認為創(chuàng)意成本過高。

所以：大多數(shù)人不做設(shè)計，富文本設(shè)計不適合單純的內(nèi)容編輯者。

雖然：大多數(shù)人也不會排版，或認為排版成本過高。

但是：Markdown Nice 將用戶從排版中釋放出來，只關(guān)注內(nèi)容本身。

3.3 關(guān)于開源

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

• 說簡單是因為：筆記、書單、工具、平臺所有有價值的東西都可以在 GitHub 中輸出，做起來很簡單
• 說困難是因為：努力做到對別人有價值，始終堅持輸出，做起來很困難

正如上面描述的那樣，做開源其實是在做一款產(chǎn)品，有可能是技術(shù)產(chǎn)品（比如 redis、ant design），也有可能是業(yè)務(wù)產(chǎn)品（比如 Markdown Nice），只有做好了才可能對別人產(chǎn)生價值。

做產(chǎn)品的過程曲折而漫長，對照 Markdown Nice 開發(fā)過程，可以看到以下的步驟：

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

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

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

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

相關(guān)學習推薦：微信小程序教程

以上是棘手的微信公眾號編輯器的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！