為了用 Markdown 寫微信公眾號(hào)唇撬,自定義了一個(gè)編輯器

身邊應(yīng)該有不少朋友在寫公眾號(hào),不知道你們用的是什么編輯器呢展融?

上面這些編輯器,應(yīng)該是小編們用得最多的幾款豫柬,它可以快速添加各種樣式插件告希,使文章更吸引眼球,讓用戶看起來(lái)很爽烧给,欲罷不能燕偶。畢竟他們最注重的是閱讀量,而非內(nèi)容础嫡。

我也有寫文章的習(xí)慣指么,但我不是小編,格式上只追求簡(jiǎn)約大方即可榴鼎,重點(diǎn)在文字上伯诬,希望內(nèi)容能產(chǎn)生一些價(jià)值。自從用了 Markdown 標(biāo)記語(yǔ)言后巫财,寫文章就再也沒(méi)用過(guò)其他的編輯器盗似。

什么是 Markdown?

什么是 Markdown平项?它是目前最流行的寫作標(biāo)記語(yǔ)言赫舒,沒(méi)有之一。它能夠通過(guò)簡(jiǎn)單標(biāo)記就能實(shí)現(xiàn)文檔格式闽瓢,讓寫作者專注于內(nèi)容接癌。

由于它是純文本,所以它可以像代碼一樣進(jìn)行版本管理扣讼,同時(shí)缺猛,它對(duì) Web 也非常友好,方便轉(zhuǎn)成 HTML届谈,甚至直接將 Markdown 文檔生成靜態(tài)站點(diǎn)枯夜,很多免費(fèi)的自建博客服務(wù)都是采用的這種方案。目前幾乎所有主流的寫作平臺(tái)艰山,其編輯器都支持 Markdown湖雹。

一些 Markdown 編輯器,甚至在其基礎(chǔ)上曙搬,擴(kuò)展了很多功能摔吏。例如:公式及表格的支持鸽嫂。前段時(shí)間,一個(gè)外國(guó)小哥的數(shù)學(xué)筆記火了征讲,全程像敲代碼一般据某,緊追數(shù)學(xué)老師板書,記了 1700 + 頁(yè)筆記诗箍。感興趣可以看下這篇文章:

1700頁(yè)數(shù)學(xué)筆記火了癣籽!全程敲代碼,速度飛快易搜索滤祖,硬核小哥教你上手LaTeX+Vim

為什么不支持 Markdown筷狼?

雖然支持它的編輯器多到數(shù)不過(guò)來(lái),可是國(guó)內(nèi)最著名的內(nèi)容發(fā)布平臺(tái) —— 微信公眾號(hào)匠童,它的編輯器就不支持 Markdown埂材,可算折騰壞了一幫寫作者。為什么不支持汤求?可能有兩個(gè)原因吧俏险。

用戶學(xué)習(xí)成本

Markdown 語(yǔ)法雖然簡(jiǎn)單,但對(duì)大部分人來(lái)說(shuō)扬绪,畢竟也是一門新的知識(shí)竖独,這就增加了用戶的學(xué)習(xí)使用成本。你要知道勒奇,絕大部分的人预鬓,哪怕一點(diǎn)點(diǎn)的新東西都是接受不了的,微信沒(méi)把編輯器做成 Word 的樣式赊颠,我覺(jué)得已經(jīng)是克制了的格二。

支持的樣式并不完整

Markdown 只提供了簡(jiǎn)單的樣式標(biāo)簽,例如:標(biāo)題竣蹦,引用顶猜,鏈接等等,而對(duì)于復(fù)雜的樣式痘括,例如文字背景色等等长窄,它是不支持的。

而微信面對(duì)的是全體創(chuàng)作者纲菌,單純使用 Markdown 編輯器定然不能滿足基本需求挠日,而兼容 Markdown 的需求優(yōu)先級(jí)并不高。

所以翰舌,一直以來(lái)嚣潜,微信并不支持 Markdown,但我猜測(cè)椅贱,支持 Markdown 的功能遲早還是會(huì)做的懂算。

Markdown 寫公眾號(hào)的痛

你不是說(shuō)了 Markdown 對(duì) Web 非常友好嘛只冻,轉(zhuǎn)成富文本樣式,然后貼到微信公眾號(hào)的編輯器里计技,就可以了呀喜德。道理是沒(méi)錯(cuò),但這正是折騰人的關(guān)鍵所在垮媒,因?yàn)?Markdown 只定義了基礎(chǔ)的標(biāo)簽舍悯,而沒(méi)有樣式。

于是睡雇,各家的 Markdown 編輯器導(dǎo)出的樣式都是有差異的贱呐,并且,跟微信公眾號(hào)上的默認(rèn)樣式也不兼容入桂。所以,貼進(jìn)去后驳阎,顯示出來(lái)的樣式各不相同抗愁,如果文章里再有一些非標(biāo)準(zhǔn)的 Markdown 語(yǔ)法,顯示出來(lái)更是五花八門了呵晚。一直以來(lái)都很糾結(jié)蜘腌,對(duì)于一些樣式復(fù)雜的文章,幾乎就不發(fā)公眾號(hào)了饵隙,因?yàn)檎{(diào)整樣式撮珠,就要耗費(fèi)大量的精力。

除了樣式兼容性問(wèn)題金矛,還有微信公眾號(hào)對(duì)外部鏈接限制問(wèn)題芯急,公眾號(hào)內(nèi)文章只允許引用微信內(nèi)部鏈接,不支持外部鏈接驶俊。文章里若添加了第三方鏈接娶耍,我們只能硬生生的將 鏈接重新再貼進(jìn)去”穑或者通過(guò)「閱讀原文」鏈接原文地址榕酒。

解決方案

微信公眾號(hào)編輯器都幾乎成為一種新的行業(yè)了,文章開(kāi)頭的那些編輯器故俐,都能自力更生了想鹰,說(shuō)明對(duì)小編們來(lái)說(shuō),公眾號(hào)編輯器問(wèn)題真的是一個(gè)痛點(diǎn)药版。

而對(duì)于適配公眾號(hào)樣式的 Markdown 編輯器辑舷,幾乎沒(méi)有,之前接觸過(guò) Md2All刚陡,功能上很完整惩妇,但是它并非只針對(duì)微信公眾號(hào)株汉,所以在細(xì)節(jié)方面的處理,總是差強(qiáng)人意歌殃。

一直想著乔妈,應(yīng)該寫一款符合自己樣式風(fēng)格的公眾號(hào)編輯器。然而氓皱,一個(gè)偶然機(jī)會(huì)路召,發(fā)現(xiàn)了它,花三小時(shí)寫這個(gè)工具波材,只為一分鐘拯救公眾號(hào)排版股淡。

在程序世界里,有句老話說(shuō)「不要重復(fù)造輪子」廷区,你費(fèi)好大勁去研究怎么做唯灵,沒(méi)準(zhǔn)別人已經(jīng)都出成品了,這樣就造成了資源浪費(fèi)隙轻。幸運(yùn)的是埠帕,我的「輪子」還沒(méi)有開(kāi)始動(dòng)手呢。

總要做點(diǎn)自己的貢獻(xiàn)

這款公眾號(hào)編輯器基本符合我的心里預(yù)期玖绿,簡(jiǎn)單的界面敛瓷,優(yōu)雅的樣式風(fēng)格,你看到的這篇文章的樣式斑匪,就是通過(guò)它生成的呐籽。

它還有一些特殊的增強(qiáng)項(xiàng),比如將外部鏈接自動(dòng)生成腳注蚀瘸,放在文章底部狡蝶;支持日語(yǔ)注音假名和漢語(yǔ)拼音,例如:小夜時(shí)雨【さ?よ?しぐれ】 上翰越【Shàng?hǎi】

雖然默認(rèn)的樣式已經(jīng)基本滿足我了牢酵,但還是缺少一些自定義的功能,比如字體大小的設(shè)置衙猪,以及主題切換等功能馍乙,作者并沒(méi)有實(shí)現(xiàn)。但是垫释,作者已經(jīng)將源代碼開(kāi)源了丝格,而我們不能只知道一味索取,而不懂得付出棵譬。

于是显蝌,我便動(dòng)手實(shí)現(xiàn)了這部分的功能。好在代碼并不復(fù)雜,簡(jiǎn)單研究一下曼尊,周末花了點(diǎn)時(shí)間酬诀,就把這部分的功能填補(bǔ)上了。

最后

這個(gè)過(guò)程還是很有趣骆撇,不僅解決了自己的痛點(diǎn)瞒御,還學(xué)到了知識(shí),同時(shí)還做出了一點(diǎn)點(diǎn)自己的貢獻(xiàn)神郊。

如果你也喜歡這篇文章的樣式肴裙,這個(gè)微信公眾號(hào)編輯器分享給你。微信公眾號(hào)格式化編輯器 - 作者原版本

根據(jù)源代碼涌乳,我重寫了一個(gè)后臺(tái)服務(wù)版本蜻懦,計(jì)劃提供一些在線 API 的功能。倉(cāng)庫(kù)地址:wechat-format-server: 基于 wechat-format 的服務(wù)端版本

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末夕晓,一起剝皮案震驚了整個(gè)濱河市宛乃,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蒸辆,老刑警劉巖烤惊,帶你破解...
    沈念sama閱讀 211,290評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異吁朦,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)渡贾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門逗宜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人空骚,你說(shuō)我怎么就攤上這事纺讲。” “怎么了囤屹?”我有些...
    開(kāi)封第一講書人閱讀 156,872評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵熬甚,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我肋坚,道長(zhǎng)乡括,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 56,415評(píng)論 1 283
  • 正文 為了忘掉前任智厌,我火速辦了婚禮诲泌,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘铣鹏。我一直安慰自己敷扫,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,453評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布诚卸。 她就那樣靜靜地躺著葵第,像睡著了一般绘迁。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上卒密,一...
    開(kāi)封第一講書人閱讀 49,784評(píng)論 1 290
  • 那天缀台,我揣著相機(jī)與錄音,去河邊找鬼栅受。 笑死将硝,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的屏镊。 我是一名探鬼主播依疼,決...
    沈念sama閱讀 38,927評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼而芥!你這毒婦竟也來(lái)了律罢?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 37,691評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤棍丐,失蹤者是張志新(化名)和其女友劉穎误辑,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體歌逢,經(jīng)...
    沈念sama閱讀 44,137評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡巾钉,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,472評(píng)論 2 326
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了秘案。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片这溅。...
    茶點(diǎn)故事閱讀 38,622評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡卿闹,死狀恐怖烘嘱,靈堂內(nèi)的尸體忽然破棺而出被因,到底是詐尸還是另有隱情,我是刑警寧澤赤惊,帶...
    沈念sama閱讀 34,289評(píng)論 4 329
  • 正文 年R本政府宣布吼旧,位于F島的核電站,受9級(jí)特大地震影響未舟,放射性物質(zhì)發(fā)生泄漏圈暗。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,887評(píng)論 3 312
  • 文/蒙蒙 一裕膀、第九天 我趴在偏房一處隱蔽的房頂上張望厂置。 院中可真熱鬧,春花似錦魂角、人聲如沸昵济。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,741評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)访忿。三九已至瞧栗,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間海铆,已是汗流浹背迹恐。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留卧斟,地道東北人殴边。 一個(gè)月前我還...
    沈念sama閱讀 46,316評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像珍语,于是被迫代替她去往敵國(guó)和親锤岸。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,490評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容