Markdown懶辦法排版微信公眾號(hào)文章

懶人的煩惱

寫微信公眾號(hào)的人群里面，不乏十分勤奮者蔫仙×暇Γ看看他們使用的排版工具，便知道為了排版一篇文章摇邦，他們要耗費(fèi)多少辛勞了恤煞。

請(qǐng)注意，他們是一個(gè)標(biāo)題施籍、一個(gè)段落居扒、一個(gè)引言這樣的用樣式模板插入內(nèi)容。這樣排版的結(jié)果確實(shí)會(huì)符合作者的要求丑慎。但是這么排版我真的做不來(lái)喜喂。

我連做博士畢業(yè)論文都不用Word啊竿裂！

我用的是LaTeX玉吁。

為什么這么標(biāo)新立異？并非有意為之腻异，而是用LaTeX的話只需要碼字兒就可以了进副。樣式的事兒，都交給程序去操心豈不更好悔常？

這幾年影斑，Markdown開(kāi)始興起，我現(xiàn)在除了數(shù)學(xué)公式机打，連LaTeX都懶得用了矫户。

你不難看出我的哲學(xué)——沒(méi)錯(cuò)，怎么省事兒怎么來(lái)姐帚。

但省事兒的同時(shí)吏垮，還需要滿足需求。

微信公眾號(hào)文章不是學(xué)術(shù)論文罐旗，公式和參考文獻(xiàn)都很少見(jiàn)膳汪。里面最常見(jiàn)的樣式無(wú)非是標(biāo)題、正文九秀、引用和圖片等遗嗽。這些東西Markdown處理起來(lái)得心應(yīng)手。

曾經(jīng)有一段我用hexo寫博客鼓蜒，就是這么做的痹换，采用Markdown排版效果一直挺好征字。

但是，在微信公眾號(hào)排版上我遇到了挫折娇豫。因?yàn)槲⑿殴娞?hào)不支持 Markdown 直接排版匙姜。到我寫作這篇文章的時(shí)候，還只支持富文本格式冯痢。

這就意味著我每次用Markdown寫好文章氮昧，預(yù)覽沒(méi)有問(wèn)題之后，還需要找個(gè)地方把Markdown轉(zhuǎn)換為富文本浦楣。

一開(kāi)始袖肥，我偷懶，在微信公眾平臺(tái)編輯器里用Markdown Here直接做這個(gè)轉(zhuǎn)換振劳。結(jié)果預(yù)覽的時(shí)候沒(méi)問(wèn)題椎组，群發(fā)之后文內(nèi)圖片全都消失了。微信公眾號(hào)一旦群發(fā)消息就無(wú)法修改历恐，而且我的個(gè)人公眾號(hào)每天只能發(fā)送一條消息寸癌。搞得我郁悶了好幾個(gè)小時(shí)。

后來(lái)我陸續(xù)嘗試了幾個(gè)微信公眾號(hào)第三方編輯工具夹供。發(fā)現(xiàn)其中135編輯器還算是差強(qiáng)人意灵份。

在這個(gè)編輯器里面用Markdown Here生成HTML仁堪，拷貝出來(lái)的時(shí)候就直接被轉(zhuǎn)換成為了富文本哮洽，貼到微信公眾平臺(tái)編輯器里標(biāo)題加黑字號(hào)與圖片顯示一切正常，發(fā)布之后驗(yàn)證圖片也能正常顯示弦聂。

于是我就認(rèn)為自己已經(jīng)找到了終南捷徑鸟辅。

可是，時(shí)間長(zhǎng)了莺葫，我就發(fā)現(xiàn)了問(wèn)題——雖然排版出來(lái)圖片是正常的匪凉，可是其他樣式全都亂套了。標(biāo)題前后間距徹底消失捺檬，而且正文文字的行距很小再层，全都堆在了一起，非常影響閱讀體驗(yàn)堡纬。

昨天早上聂受，我6點(diǎn)多爬起來(lái)，把一篇文章修訂之后烤镐，就打算在微信公眾號(hào)發(fā)出去蛋济。

按照老樣子粘貼過(guò)去富文本，怎么看怎么別扭炮叶。

于是嘗試了若干種不同的第三方編輯器碗旅，發(fā)現(xiàn)都不理想渡处，有些干脆就無(wú)法保留任何樣式。

突然發(fā)現(xiàn)了135編輯器彈窗里面推廣VIP功能祟辟。

之前一直把這個(gè)編輯器當(dāng)成中轉(zhuǎn)站医瘫，我從來(lái)就沒(méi)有關(guān)注過(guò)其中的“高級(jí)”功能。這次看了一眼旧困，發(fā)現(xiàn)了“一鍵排版”登下。而且，其中但凡是看得過(guò)去的主題叮喳，全都得VIP才能用被芳。對(duì)一個(gè)懶人來(lái)說(shuō)，這種關(guān)鍵詞的誘惑哪里受得了馍悟？立即就下單買了一個(gè)月的畔濒。

您還真別說(shuō)，一鍵排版之后锣咒，立刻行間距和標(biāo)題格式都好看了侵状。我使用了“簡(jiǎn)約”模板，看著覺(jué)得賞心悅目毅整。

嗯趣兄，這樣好！

……

咦悼嫉，不對(duì)巴丁！

怎么標(biāo)題變出來(lái)這么多戏蔑？蹋凝！

定睛一看，原來(lái)這個(gè)一鍵排版不夠智能总棵，居然分辨不出來(lái)Markdown Here轉(zhuǎn)換之后的文本里面哪一行是標(biāo)題鳍寂！作為補(bǔ)償，它會(huì)讓使用者設(shè)置一個(gè)字?jǐn)?shù)閾值（默認(rèn)20個(gè)字）情龄，低于這個(gè)字?jǐn)?shù)閾值迄汛，就被認(rèn)為是標(biāo)題。

這不是搞笑嗎骤视？鞍爱！

我喜歡用短句啊尚胞！

更糟糕的是硬霍，排版之后，還無(wú)法方便地手動(dòng)對(duì)標(biāo)題識(shí)別結(jié)果進(jìn)行調(diào)整笼裳。我為了遷就它唯卖，只好把閾值降低字?jǐn)?shù)粱玲，然后往文字后面加入標(biāo)點(diǎn)符號(hào)，或者把行合并拜轨。怎么看怎么覺(jué)得別扭抽减。

7點(diǎn)半，終于弄得差不多了橄碾。我把排版結(jié)果拷貝到微信公眾平臺(tái)編輯器里面卵沉。預(yù)覽一下，覺(jué)得可以法牲，就發(fā)出去了史汗。

發(fā)出去之后，嚇了一大跳——文中所有的字體加粗全部被取消了拒垃。

這就叫“一鍵排版”停撞？

得，認(rèn)了悼瓮，幸好我只買了一個(gè)月的VIP戈毒。

醍醐灌頂

今天，從茫茫文海里面一眼看到了Jason Ng的文章《可能吧公眾號(hào)的文章是如何排版的横堡？》埋市。

Jason是我非常欽佩的作者，他的公眾號(hào)排版精良命贴，我很羨慕道宅。開(kāi)始以為他要講自己是如何用第三方編輯器一個(gè)段落一個(gè)段落手動(dòng)調(diào)樣式呢，我打算接受一下吃苦耐勞的教育套么，好好對(duì)照反省自己的懶惰培己。可是越讀下去我越開(kāi)心——他跟我一樣用Markdown芭呙凇！

但是不同的是肃弟，高手的概念比我清晰許多玷室。

既然Markdown生成的是HTML，那調(diào)CSS不就好了嗎笤受？

對(duì)扒铉汀！

為什么要讓Markdown Here這么一個(gè)組件來(lái)決定我的文章排版樣式風(fēng)格呢箩兽？把Markdown轉(zhuǎn)換為HTML津肛，然后用富文本方式拷貝到微信公眾平臺(tái)編輯器里面，不就完事大吉了嘛汗贫。

我立即嘗試身坐，效果非常好秸脱。但是卻立即發(fā)現(xiàn)了問(wèn)題。這個(gè)問(wèn)題在于Jason對(duì)讀者的預(yù)期部蛇。

對(duì)于“一點(diǎn)都不懂 HTML 和 CSS”的讀者摊唇，Jason給出了兩種解決辦法。

方法一是你需要認(rèn)識(shí)一個(gè)設(shè)計(jì)師和一個(gè)前端工程師涯鲁，這個(gè)要求稍微有些高巷查，這里咱們先不討論了。

方法二是自己動(dòng)手學(xué)習(xí)抹腿，看到這里估計(jì)許多人都躍躍欲試岛请。

可能吧的讀者中，假設(shè)有10個(gè)人對(duì)微信公眾號(hào)Markdown排版感興趣警绩，能有5個(gè)照著方法二完成嗎髓需？我不那么有信心。

為什么房蝉？

因?yàn)镴ason的操作指南里面僚匆，有這樣一句：

花 1 天時(shí)間，學(xué)會(huì)如何寫一個(gè)簡(jiǎn)單包含 replacements 函數(shù)的 Python 腳本搭幻。

實(shí)話實(shí)說(shuō)咧擂，沒(méi)有接觸過(guò)編程的人，打算用這速度學(xué)Python檀蹋，還能堅(jiān)持下來(lái)松申，我覺(jué)得可能性很小。

Jason這樣想完全可以理解俯逾，因?yàn)槿艘匀悍置惩埃梢韵胂笏J(rèn)識(shí)的人中，許多雖然沒(méi)有技術(shù)基礎(chǔ)桌肴，但是愿意保持開(kāi)放的心態(tài)來(lái)學(xué)習(xí)新東西皇筛。然而公眾號(hào)的對(duì)象并不只是他的朋友們。許多沒(méi)有技術(shù)基礎(chǔ)的人坠七，在讀到這一條的時(shí)候水醋，會(huì)立即退縮不前。這不是我的臆斷彪置，你去普通高校的文科專業(yè)教幾年技術(shù)類課程拄踪，恐怕你的想法跟我相去無(wú)幾。

這就好像一個(gè)NBA教練讓球員好好練練反手扣籃一樣——他的球員都是2米左右的巨人啊拳魁，稍加努力就可以完成了惶桐。然而同樣是這個(gè)NBA教練，就算他把反手扣籃的訣竅寫下來(lái)白送給我，我也不會(huì)去嘗試的姚糊。

好消息是贿衍，經(jīng)過(guò)我的摸索，發(fā)現(xiàn)了一個(gè)事實(shí)——你不用學(xué)會(huì)Python腳本叛拷，也能以懶人的辦法用Markdown排版微信公眾號(hào)文章舌厨。

流程介紹

工欲善其事，必先利其器忿薇。

Jason在文章里面推薦了Ulysses裙椭，確實(shí)是寫作利器，我深表贊同署浩。

這里我推薦一個(gè)配套的軟件揉燃，叫做Marked2。

Ulysses中的文章可以輕松導(dǎo)出到Marked2里面預(yù)覽筋栋，然后可以帶樣式導(dǎo)出為HTML炊汤。

你不需要用一個(gè)腳本去替換段落和標(biāo)題標(biāo)簽了，你只需要修改Marked2里面的用戶定制CSS就行弊攘。

我這里根據(jù)Jason文中提到的樣式信息抢腐，修改了其中正文段落樣式部分：

p,h5 {
    /*font-size: 1.1429em;*/
    /*line-height: 1.3125em;*/
    margin: 1.3125em 0;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 28px;
}

在瀏覽器里面預(yù)覽導(dǎo)出的HTML文件，效果是這樣的：