相關(guān)學(xué)習(xí)推薦：微信公眾號(hào)開發(fā)教程

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

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

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

一、引子

1.1 Markdown 是什麼？

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

富含了標(biāo)題、引用、加粗、連結(jié)、圖片、程式碼片段、公式等一切在文字創(chuàng)作中所需的排版格式。

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

1.2 怎麼跟微信公眾號(hào)結(jié)合？

這麼優(yōu)秀的排版文法，可是微信公眾號(hào)也不支持呀。

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

1.3 Markdown Nice 是什麼？

一款開源 Markdown 編輯器，寫完後即排版成功，複製即可貼上到微信公眾號(hào)。

So what？只有這點(diǎn)麼？

當(dāng)然不是！ Nice寶寶你還有什麼特質(zhì)呀？

• 支援圖床、腳註、程式碼、公式
• 支援8 種排版主題和7 種程式碼主題
• 支援自訂樣式，可提交主題供人瞻仰
• 除了公眾號(hào)碼外，還支援知乎、掘金、部落格花園和CSDN等平臺(tái)
• 我顏值高呀

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

網(wǎng)址：https://mdnice.com

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

二、正文

沒想到你還在看

咳、、

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

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

2.1 戰(zhàn)鬥序章

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

因?yàn)閡editor 是富文本編輯器，所以我即將面臨的是markdown->富文本 的轉(zhuǎn)換戰(zhàn)役，在開源界或軟體界這種轉(zhuǎn)換戰(zhàn)役有了相當(dāng)多的優(yōu)秀實(shí)現(xiàn)。例如：

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

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

那麼有沒有嘗試彌補(bǔ)這一問題的工具呢？其實(shí)是有的：

• Web端：md2all、wechat-format
• 瀏覽器外掛：markdown-here

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

• 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等

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

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

2.2 戰(zhàn)鬥第一槍：程式碼主題

微信公眾號(hào)在2018年以前，是完全不支援程式碼區(qū)塊的，目前的支援也很單一，並且存在程式碼字體較大的問題。

說來很氣，微信公眾號(hào)編輯器的開發(fā)者，就木有想過程式碼區(qū)塊對程式設(shè)計(jì)師群體是多麼重要么？ ？

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

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

其中微信程式碼主題由於其不屬於highlight.js的歸屬範(fàn)疇，故而其結(jié)構(gòu)需要從微信公眾號(hào)編輯器源碼中獲取，下面兩張圖展示瞭如何獲?。?

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

除了上述問題外，許多技術(shù)類別在公眾號(hào)程式碼中會(huì)存在：一行程式碼過長導(dǎo)致的多行顯示問題。

此問題使用以下CSS 程式碼即可解決：

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

對比效果如圖所示：

從此使用Markdown Nice 的同志們程式碼更美觀！

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

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

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

#圖片管理是每個(gè)成熟編輯器都會(huì)遇到的問題。

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

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

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

為了解決上述問題，Markdown Nice 先後支援了自訂阿里雲(yún)和七牛雲(yún)圖床，透過購買阿里雲(yún)和七牛雲(yún)的服務(wù)使用自建圖床。

但是！讓使用者自己配置，儘管有配置文檔，但是整個(gè)配置過程複雜無比，簡直慘絕人寰！

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

圖床	費(fèi)用	有效期限	失敗率
mdnice	免費(fèi)	1天	低
SM.MS	#免費(fèi)	長期	高
		七牛雲(yún)	10G免費(fèi)
低		這場圖床的戰(zhàn)役中，最大的難度在于需要閱讀阿里云 OSS 和七牛云 KODO 的文檔，并且使用其開源出來的工具包 ali-oss 和 qiniu-js 。 這其中又涉及到了 FormData、file對象、base64 和 blob 之間的神奇轉(zhuǎn)換，源碼參考。 總之，這場戰(zhàn)斗打的不亦樂乎。 2.4 戰(zhàn)斗第三槍：數(shù)學(xué)公式 微信公眾號(hào)排版中，數(shù)學(xué)公式是一個(gè)噩夢！ 因?yàn)槲⑿啪庉嬈髯隽艘韵氯虑椋?/p> 不支持公式編輯 不支持 html 和 css 生成的公式，因?yàn)樽煮w無法導(dǎo)入 不支持 svg，放入后提示失敗 這三件事情簡直像魔鬼的步伐，把公式需求者放在光滑的地板上摩擦、摩擦.... 目前唯一可行的方案就是將公式轉(zhuǎn)換成圖片，再將圖片直接貼到公眾號(hào)里，Nice寶寶覺得自己這個(gè)想法簡直是完美！ 但是，怎么做呢...... 忽然靈機(jī)一動(dòng)，想到了朋友曾經(jīng)推薦的一個(gè)轉(zhuǎn)換公式網(wǎng)站 棘手的微信公眾號(hào)編輯器，這個(gè)網(wǎng)站能夠做到將任意公式轉(zhuǎn)換成png圖片并給出可訪問鏈接。 但是由于圖片穩(wěn)定性，無法直接使用該鏈接，會(huì)存在和第二場戰(zhàn)役一樣，圖片粘貼失敗的情況，讓人苦不堪言。 這個(gè)問題該怎么解決呢？如果能夠自建公式轉(zhuǎn)png圖片服務(wù)就好了。 有沒有這樣的開源庫？有！MathJax-node 就可以！ 于是Nice寶寶自建后臺(tái)服務(wù)，封裝 RESTful 接口供前端調(diào)用，實(shí)現(xiàn)了公式轉(zhuǎn)圖片的功能！經(jīng)過測試，完全可以使用，粘貼后再根據(jù)排版情況調(diào)整圖片大小即可。 其中對于大量公式的轉(zhuǎn)換，前端合理使用了異步請求，并非一個(gè)個(gè)轉(zhuǎn)換而是并行執(zhí)行，性能上達(dá)到了10個(gè)公式也能2秒轉(zhuǎn)換完畢的效果，完全可用于公式排版。 2.5 戰(zhàn)斗第四槍：微信外鏈轉(zhuǎn)腳注 眾所周知（不知道也得知道），微信不支持外鏈，除了域名為https://mp.weixin.qq.com/的合法鏈接外，其他的鏈接出現(xiàn)后都會(huì)被自動(dòng)刪除。 而添加外鏈的唯一官方方式就是在閱讀全文處，當(dāng)然，直接將鏈接本身放到文中或者制作二維碼圖片也是可以的選擇。 而 Nice 寶寶則提供了將微信外鏈轉(zhuǎn)為腳注的方式解決該問題，是不是很優(yōu)雅呢？ 其中鏈接和腳注的使用區(qū)別如下： 鏈接：[文字](鏈接?"文字") 腳注：[文字](腳注解釋?"腳注名字")復(fù)制代碼 這里又涉及到了一個(gè)常見的問題，就是很多公眾號(hào)作者的文章中，原來在其他平臺(tái)發(fā)布時(shí)都是鏈接，而到這里排版時(shí)需要進(jìn)行挨個(gè)修改，實(shí)在是讓人頭大。 于是Nice寶寶我又做了一個(gè)小改進(jìn)，就是在粘貼文章的時(shí)候會(huì)自動(dòng)監(jiān)測是否存在外鏈，并提示作者是否一鍵轉(zhuǎn)成腳注，這樣就不必手工修改了，贊不贊！ 2.6 戰(zhàn)役總結(jié) 和微信公眾號(hào)編輯器對抗，是個(gè)極其有意思的過程。除了上述提到的問題之外，還有很多的細(xì)節(jié)點(diǎn)需要注意，在此就不一一討論了，感興趣歡迎閱讀源碼。 Markdown Nice 的戰(zhàn)鬥之旅還遠(yuǎn)遠(yuǎn)沒有結(jié)束，官網(wǎng)製作、瀏覽器插件、本地工具和排版糾正等功能蓄勢待發(fā)。 三、談點(diǎn)和戰(zhàn)鬥無關(guān)的 3.1 設(shè)計(jì)理念 大多數(shù)人而言，內(nèi)容重於排版，排版重於設(shè)計(jì)。 內(nèi)容是吸引讀者的核心，所以最重要。 而排版與設(shè)計(jì)之間的比較，作為一個(gè)曾經(jīng)的微信美術(shù)編輯，隨著排版經(jīng)驗(yàn)的增多，發(fā)現(xiàn)文章的效果並不在於額外的花邊、點(diǎn)綴。 整齊、舒服、簡單是硬道理! 3.2 內(nèi)容、排版與設(shè)計(jì) 設(shè)計(jì)=排版創(chuàng)意 因?yàn)椋捍蠖鄶?shù)人不會(huì)獲得創(chuàng)意，或認(rèn)為創(chuàng)意成本過高。 所以：大多數(shù)人不做設(shè)計(jì)，富文本設(shè)計(jì)不適合單純的內(nèi)容編輯者。 #雖然：大多數(shù)人也不會(huì)排版，或認(rèn)為排版成本過高。 但是：Markdown Nice 將使用者從排版中釋放出來，只專注於內(nèi)容本身。 3.3 關(guān)於開源 開源是個(gè)既簡單又困難的過程： 說簡單是因?yàn)?/strong>：筆記、書單、工具、平臺(tái)所有有價(jià)值的東西都可以在GitHub 中輸出，做起來很簡單 #說困難是因?yàn)?/strong>：努力做到對別人有價(jià)值，始終堅(jiān)持輸出，做起來很困難 正如上面描述的那樣，做開源其實(shí)是在做一款產(chǎn)品，有可能是技術(shù)產(chǎn)品（例如redis、ant design），也有可能是業(yè)務(wù)產(chǎn)品（例如Markdown Nice），只有做好了才可能對別人產(chǎn)生價(jià)值。 做產(chǎn)品的過程曲折而漫長，對照Markdown Nice 開發(fā)過程，可以看到以下的步驟： 要有一個(gè)idea，並且驗(yàn)證其可行性和必要性，去和同類產(chǎn)品比較，做到心中有數(shù) 抓住痛點(diǎn)，掌握核心價(jià)值，站在用戶角度思考，多聽反饋意見 螺旋上升，不斷迭代，產(chǎn)出精品 最最重要一點(diǎn)，做產(chǎn)品不只要寫程式碼，還要宣傳呀！ ！酒香也怕巷子深！ ！ 參與開源，一路走來，甚是不易，望君珍惜。 最後，感謝每位開源參與者，歡迎更多人參與開源中來，還有好多程式碼等著有人來寫呢！ 『講解開源專案系列』—讓對開源專案感興趣的人不再畏懼、讓開源專案的發(fā)起者不再孤單。跟著我們的文章，你會(huì)發(fā)現(xiàn)程式設(shè)計(jì)的樂趣、使用和發(fā)現(xiàn)參與開源專案如此簡單。歡迎留言聯(lián)絡(luò)我們、加入我們，讓更多人愛上開源、貢獻(xiàn)開源～ 相關(guān)學(xué)習(xí)推薦：微信小程式教學(xué) #

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