如何用Markdown輕松排版知乎專欄文章?

免費、便捷、高效的知乎專欄Markdown排版技巧。希望讀過本文,可以讓你的寫作過程也變得更愉悅。

痛點

從前,寫作時的排版是件辛苦事。不論你把排版環節放在寫作中還是寫作后,總會在心里清楚意識到,還有這么一個繁重而無趣的工作在等著你。

后來,有了Markdown,排版就變成了一件令人愉悅的事情了。你只需要用非常簡單的記號說明一些特殊位置,例如標題、列表、腳注和圖片等,然后應用不同的樣式,你寫好的文字就能自動轉化為各種漂亮的排版效果了。

讀者看著舒服,作者寫得高興。Markdown這東西,真的影響了世界。

然而……

不是每一個寫作平臺,都支持Markdown。

這話應該倒過來說——目前主流的寫作平臺里,支持Markdown的還不是很多。

我孤陋寡聞,用過的寫作平臺,僅有簡書、新生大學和Matrix支持Markdown格式排版。所以用起來很舒服。

但是我們無法因此拒絕其他寫作平臺。畢竟辛辛苦苦寫了文章,總希望更多人都能看到。那些平臺往往給你一個類似簡化了的Word的編輯界面。你可以加粗字體、設置列表、插圖制表,但是平臺期待你手動完成上述工作。

我曾經圍繞著如何用Markdown排版微信公眾號的問題,寫了好幾篇文章。有的文章寫了將近一年,還有新讀者在點贊。

這讓我很慚愧。因為近一年以來,我自己的Markdown寫作和排版流程都發生了變化。現在你可以利用免費的編輯器搭建更為舒適的寫作環境,安裝插件更方便地上傳圖片到圖床,同時應用更好的樣式讓讀者在移動設備上讀得更愉快

關于如何用Markdown排版微信公眾號的文章,已經太多了。今天我們換一個話題,聊聊如何用Markdown排版知乎專欄文章。其實,本文的操作流程對微信公眾號、今日頭條等其他寫作平臺都是通用的。

最近我在知乎專欄發布了一些文章。比起其他寫作平臺,知乎的讀者似乎更喜歡在留言中與作者互動。尤其是追問式地拓展討論、探求真知。這給了作者(也就是我)很大鼓舞。在此,我把Markdown排版知乎專欄的技巧發布出來,希望幫助更多的作者收獲這種創作和交流的喜悅。

工欲善其事,必先利其器。讓我們從編輯器講起吧。

編輯器

這里給大家推薦的編輯器,叫做Atom。

這款編輯器最初的用戶,大部分都是Geek和程序員。因為它的生態系統過于強大,所以就如同Emacs一樣,簡直就是“偽裝成編輯器的操作系統”。

普通人寫篇文章,原本是根本用不上這種大殺器的。

但是誰叫Ulysses改成訂閱式了呢?

Atom,至少在目前,還是開源免費的。

請到這個地址下載Atom編輯器。網站會根據你的操作系統,自動找到對應的版本供你下載。

因為我用的是macOS,所以這里網站提供的是蘋果版本Atom。

下載之后,安裝運行。然后你需要安裝2個插件。

第一個插件是幫你預覽Markdown用的,它叫做markdown-preview-enhanced。Markdown里,有圖片、表格和網頁鏈接,如果沒有預覽功能,那你就得面對許多代碼一樣的東西。對于非技術類寫作者來說,可能就會覺得不舒服了。

Atom編輯器安裝插件的方法很簡單。

使用Cmd + ,呼叫配置菜單。注意我這里說的是蘋果系統macOS上的操作。如果你用的是Windows,請把所有出現的Cmd按鍵替換為Ctrl按鍵,或者查閱幫助文檔。下同。

選擇左側邊欄的最后一項,那個+號,用于安裝新的插件。

在搜索框中輸入該插件的名字:markdown-preview-enhanced

點擊搜索結果中該插件的Install按鈕。

很快,插件安裝好了。

點擊上圖中出現的Settings。你會看到這個插件的一些選項。

下拉滑動條到中間左右的位置,你會看到一個叫做Image Uploader的選項。請點擊右側的上下箭頭按鈕,選擇sm.ms

好了,第一個插件安裝設置完成了。下面我們安裝第二個插件,叫做markdown-image-assistant。安裝方法和剛才的插件一樣,不贅述了。安裝好后你會看到這樣的顯示。

這里,我們不需要調整設置。

好了,編輯器配置完畢,下面我們開始試用一下。

使用Cmd + N新建一個文件,保存名稱為test.md

然后我們輸入了這樣一些內容。

Ctrl+Shift+M呼叫預覽,我們可以看到右側邊欄出現了Markdown排版后的樣子。

基礎的Markdown排版一般不會有什么問題,下面我們來看看最讓圖文寫作者頭疼的項目——插圖。

插圖

我們用Markdown寫作的時候,一般插圖都會使用本地文件。但是排版完成,打算發布的時候,這些本地文件卻是無法被寫作平臺識別的。因此很多人本地排版Markdown預覽效果之后,又需要在寫作平臺上重新插圖一次。

想想都覺得恐怖。尤其是像我這樣,一篇文章里恨不得要放幾十張插圖的人。

有的人于是很激進地選擇就在云端寫作和插圖。這樣的好處是你寫作時候的插圖就可以直接發布,缺點是本地沒有副本。

這很不安全。因為寫作平臺也未必保證永續經營。如果某一天平臺宣布停止運營,你放置其上的一堆圖片怎么辦?

所以,最為貪婪的想法是——我在編輯器插圖,在本地存留備份,同時自動上傳一份插圖到云端圖床,以便發布使用。

你是不是覺得我這像是在做白日夢?

不是,其實這樣的設置你已經做好了。

不信?

現在我們就試一下。

我們在網上找到了一幅圖片。

我們把圖片存儲到本地,然后在Atom編輯器里找到合適的位置,把本地的那張圖片拖拽進來,奇跡就發生了。

你可能會納悶——咦?我明明只插了一次圖像,為什么右側預覽里面有2張圖。

實際上,你看左側的Markdown語句,是這樣的:

![game-of-thrones-jon-snow-season-6-1080x608_sjva](http://upload-images.jianshu.io/upload_images/64542-9292e9669d76ced6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)![](/Users/wsy/Dropbox/markdown_export/repo/test-cd7de992.jpg)

這里是兩個插圖語句寫在了一行上。

第一部分是遠程圖床的插圖代碼,其后跟著的是本地插圖代碼。

這樣,你的一次拖拽,圖片就被保存在了本地assets目錄,并且同時被上傳到了云端。而相應的代碼,編輯器和插件都替你寫好了。

排版

把純文本的Markdown文件,變成移動互聯網上圖文并茂的漂亮文章,你需要用合適的樣式文件來排版。樣式文件(css)替你操心哪里用幾號字,什么標題用某種顏色,以及段間距多少之類的瑣碎事。

我目前使用的是尹航的css,他專門為移動設備閱讀做了優化。因為涉及版權保護問題,請自行搜索后下載,存儲為本地的css文件備用。

同類的css文件還有很多,例如李笑來、陽志平都有各自的版本分享出來。請根據自己的口味進行選擇。

選擇并存儲好css文件后,我們來安裝瀏覽器插件。

請在Google Chrome里面安裝Markdown Here插件

安裝后,右鍵點擊該插件圖標,在彈出菜單里單擊“選項”按鈕。

找到上圖這個文本框,把你下載好的css文件內容拷貝粘貼進去。

然后打開wangEditor

回到Atom編輯器里面,把左邊欄寫好的Markdown格式文章全文拷貝,粘貼到wangEditor的編輯器窗口中。

點擊Chrome的Markdown Here插件,你會立即看到排版后的結果。

確認排版效果一切正常后,全選wangEditor編輯區域的內容,拷貝。

打開知乎專欄的“寫文章”功能。

在“請輸入正文”的部分,粘貼。

你會看到,云端圖床的圖片正常顯示,本地鏈接圖片沒有正常上傳。不過這絲毫沒有關系

因為當你預覽或者發布的時候,看到的內容是這個樣子的:

好了,知乎專欄文章用Markdown排版成功!

討論

你平時都在哪些寫作平臺上發布文章?你使用Markdown了嗎?使用過程中有什么心得體會?遇到過哪些問題?相比本文,你是否有更好的編輯排版流程?你使用的編輯器是否更有特色?歡迎留言,記錄下你的思考,我們一起交流討論。

如果你對我的文章感興趣,歡迎點贊,并且關注我的文集“玉樹芝蘭”。

如果本文可能對你身邊的親友有幫助,也歡迎你把本文通過微博或朋友圈分享給他們。讓他們一起參與到我們的討論中來。

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

推薦閱讀更多精彩內容

  • 作者:王子亭 Atom 是 GitHub 在 2014 年發布的一款基于 Web 技術構建的文本編輯器,我從 20...
    LeanCloud官方帳號閱讀 3,118評論 0 13
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,173評論 4 61
  • 你是我走不出的柏林墻,一面我親手建造的柏林墻
    未來無歌閱讀 140評論 0 0
  • Tablayout是什么 Tablayout的使用 1.首先必須導入谷歌的依賴包 2. 創建布局(2種方式)I.在...
    Tuttonero閱讀 3,357評論 2 5
  • 我們雖可以靠父母和親戚的庇護而成長,倚賴兄弟和好友,借交游的扶助,因愛人而得到幸福,但是無論怎樣,歸根結底人類還是...
    吾愛絲語閱讀 320評論 0 0