Markdown懶辦法排版微信公眾號文章

懶人的煩惱

寫微信公眾號的人群里面,不乏十分勤奮者。看看他們使用的排版工具,便知道為了排版一篇文章,他們要耗費多少辛勞了。

請注意,他們是一個標題、一個段落、一個引言這樣的用樣式模板插入內容。這樣排版的結果確實會符合作者的要求。但是這么排版我真的做不來。

我連做博士畢業論文都不用Word啊!

我用的是LaTeX。

為什么這么標新立異?并非有意為之,而是用LaTeX的話只需要碼字兒就可以了。樣式的事兒,都交給程序去操心豈不更好?

這幾年,Markdown開始興起,我現在除了數學公式,連LaTeX都懶得用了。

你不難看出我的哲學——沒錯,怎么省事兒怎么來。

但省事兒的同時,還需要滿足需求。

微信公眾號文章不是學術論文,公式和參考文獻都很少見。里面最常見的樣式無非是標題、正文、引用和圖片等。這些東西Markdown處理起來得心應手。

曾經有一段我用hexo寫博客,就是這么做的,采用Markdown排版效果一直挺好。

但是,在微信公眾號排版上我遇到了挫折。因為微信公眾號不支持 Markdown 直接排版。到我寫作這篇文章的時候,還只支持富文本格式。

這就意味著我每次用Markdown寫好文章,預覽沒有問題之后,還需要找個地方把Markdown轉換為富文本。

一開始,我偷懶,在微信公眾平臺編輯器里用Markdown Here直接做這個轉換。結果預覽的時候沒問題,群發之后文內圖片全都消失了。微信公眾號一旦群發消息就無法修改,而且我的個人公眾號每天只能發送一條消息。搞得我郁悶了好幾個小時。

后來我陸續嘗試了幾個微信公眾號第三方編輯工具。發現其中135編輯器還算是差強人意。

在這個編輯器里面用Markdown Here生成HTML,拷貝出來的時候就直接被轉換成為了富文本,貼到微信公眾平臺編輯器里標題加黑字號與圖片顯示一切正常,發布之后驗證圖片也能正常顯示。

于是我就認為自己已經找到了終南捷徑。

可是,時間長了,我就發現了問題——雖然排版出來圖片是正常的,可是其他樣式全都亂套了。標題前后間距徹底消失,而且正文文字的行距很小,全都堆在了一起,非常影響閱讀體驗。

昨天早上,我6點多爬起來,把一篇文章修訂之后,就打算在微信公眾號發出去。

按照老樣子粘貼過去富文本,怎么看怎么別扭。

于是嘗試了若干種不同的第三方編輯器,發現都不理想,有些干脆就無法保留任何樣式。

突然發現了135編輯器彈窗里面推廣VIP功能。

之前一直把這個編輯器當成中轉站,我從來就沒有關注過其中的“高級”功能。這次看了一眼,發現了“一鍵排版”。而且,其中但凡是看得過去的主題,全都得VIP才能用。對一個懶人來說,這種關鍵詞的誘惑哪里受得了?立即就下單買了一個月的。

您還真別說,一鍵排版之后,立刻行間距和標題格式都好看了。我使用了“簡約”模板,看著覺得賞心悅目。

嗯,這樣好!

……

咦,不對啊!

怎么標題變出來這么多?!

定睛一看,原來這個一鍵排版不夠智能,居然分辨不出來Markdown Here轉換之后的文本里面哪一行是標題!作為補償,它會讓使用者設置一個字數閾值(默認20個字),低于這個字數閾值,就被認為是標題。

這不是搞笑嗎?!

我喜歡用短句啊!

更糟糕的是,排版之后,還無法方便地手動對標題識別結果進行調整。我為了遷就它,只好把閾值降低字數,然后往文字后面加入標點符號,或者把行合并。怎么看怎么覺得別扭。

7點半,終于弄得差不多了。我把排版結果拷貝到微信公眾平臺編輯器里面。預覽一下,覺得可以,就發出去了。

發出去之后,嚇了一大跳——文中所有的字體加粗全部被取消了。

這就叫“一鍵排版”?

得,認了,幸好我只買了一個月的VIP。

醍醐灌頂

今天,從茫茫文海里面一眼看到了Jason Ng的文章《可能吧公眾號的文章是如何排版的?》。

Jason是我非常欽佩的作者,他的公眾號排版精良,我很羨慕。開始以為他要講自己是如何用第三方編輯器一個段落一個段落手動調樣式呢,我打算接受一下吃苦耐勞的教育,好好對照反省自己的懶惰。可是越讀下去我越開心——他跟我一樣用Markdown啊!

但是不同的是,高手的概念比我清晰許多。

既然Markdown生成的是HTML,那調CSS不就好了嗎?

對啊!

為什么要讓Markdown Here這么一個組件來決定我的文章排版樣式風格呢?把Markdown轉換為HTML,然后用富文本方式拷貝到微信公眾平臺編輯器里面,不就完事大吉了嘛。

我立即嘗試,效果非常好。但是卻立即發現了問題。這個問題在于Jason對讀者的預期。

對于“一點都不懂 HTML 和 CSS”的讀者,Jason給出了兩種解決辦法。

方法一是你需要認識一個設計師和一個前端工程師,這個要求稍微有些高,這里咱們先不討論了。

方法二是自己動手學習,看到這里估計許多人都躍躍欲試。

可能吧的讀者中,假設有10個人對微信公眾號Markdown排版感興趣,能有5個照著方法二完成嗎?我不那么有信心。

為什么?

因為Jason的操作指南里面,有這樣一句:

花 1 天時間,學會如何寫一個簡單包含 replacements 函數的 Python 腳本。

實話實說,沒有接觸過編程的人,打算用這速度學Python,還能堅持下來,我覺得可能性很小。

Jason這樣想完全可以理解,因為人以群分,可以想象他認識的人中,許多雖然沒有技術基礎,但是愿意保持開放的心態來學習新東西。然而公眾號的對象并不只是他的朋友們。許多沒有技術基礎的人,在讀到這一條的時候,會立即退縮不前。這不是我的臆斷,你去普通高校的文科專業教幾年技術類課程,恐怕你的想法跟我相去無幾。

這就好像一個NBA教練讓球員好好練練反手扣籃一樣——他的球員都是2米左右的巨人啊,稍加努力就可以完成了。然而同樣是這個NBA教練,就算他把反手扣籃的訣竅寫下來白送給我,我也不會去嘗試的。

好消息是,經過我的摸索,發現了一個事實——你不用學會Python腳本,也能以懶人的辦法用Markdown排版微信公眾號文章。

流程介紹

工欲善其事,必先利其器。

Jason在文章里面推薦了Ulysses,確實是寫作利器,我深表贊同。

這里我推薦一個配套的軟件,叫做Marked2。

Ulysses中的文章可以輕松導出到Marked2里面預覽,然后可以帶樣式導出為HTML。

你不需要用一個腳本去替換段落和標題標簽了,你只需要修改Marked2里面的用戶定制CSS就行。

我這里根據Jason文中提到的樣式信息,修改了其中正文段落樣式部分:

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

在瀏覽器里面預覽導出的HTML文件,效果是這樣的:

Jason推薦在CKEditor在線編輯器里面把HTML轉換為富文本,然后拷貝到微信公眾平臺編輯器。

我嘗試了一下,發覺這個編輯器確實強大,完全版里面選項很豐富。但對于初學者而言,使用方法并不直觀。打開網站主頁,你甚至都找不到HTML源碼應該貼在哪兒。

不過干嘛非要執著于某個在線編輯器呢?找一個打開后立即能用的不好嗎?

我找到了wangEditor編輯器,開源免費。

插入HTML源碼后,預覽一下,效果是一致的。

貼到微信公眾平臺編輯器里面,發現所有自定義樣式全部都可以保留。

這便是我在Jason的啟發下,整理出來的懶人Markdown排版方法。困擾了我多日的微信公眾號排版問題,就這樣解決了。


延伸閱讀:

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,702評論 6 534
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,615評論 3 419
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,606評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,044評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,826評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,227評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,307評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,447評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,992評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,807評論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,001評論 1 370
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,550評論 5 361
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,243評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,667評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,930評論 1 287
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,709評論 3 393
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,996評論 2 374

推薦閱讀更多精彩內容