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

免費(fèi)、便捷黑毅、高效的知乎專欄Markdown排版技巧嚼摩。希望讀過(guò)本文,可以讓你的寫(xiě)作過(guò)程也變得更愉悅。

痛點(diǎn)

從前枕面,寫(xiě)作時(shí)的排版是件辛苦事愿卒。不論你把排版環(huán)節(jié)放在寫(xiě)作中還是寫(xiě)作后,總會(huì)在心里清楚意識(shí)到潮秘,還有這么一個(gè)繁重而無(wú)趣的工作在等著你掘猿。

后來(lái),有了Markdown唇跨,排版就變成了一件令人愉悅的事情了稠通。你只需要用非常簡(jiǎn)單的記號(hào)說(shuō)明一些特殊位置,例如標(biāo)題买猖、列表改橘、腳注和圖片等,然后應(yīng)用不同的樣式玉控,你寫(xiě)好的文字就能自動(dòng)轉(zhuǎn)化為各種漂亮的排版效果了飞主。

讀者看著舒服,作者寫(xiě)得高興高诺。Markdown這東西碌识,真的影響了世界。

然而……

不是每一個(gè)寫(xiě)作平臺(tái)虱而,都支持Markdown筏餐。

這話應(yīng)該倒過(guò)來(lái)說(shuō)——目前主流的寫(xiě)作平臺(tái)里,支持Markdown的還不是很多牡拇。

我孤陋寡聞魁瞪,用過(guò)的寫(xiě)作平臺(tái),僅有簡(jiǎn)書(shū)惠呼、新生大學(xué)和Matrix支持Markdown格式排版导俘。所以用起來(lái)很舒服。

但是我們無(wú)法因此拒絕其他寫(xiě)作平臺(tái)剔蹋。畢竟辛辛苦苦寫(xiě)了文章旅薄,總希望更多人都能看到。那些平臺(tái)往往給你一個(gè)類似簡(jiǎn)化了的Word的編輯界面泣崩。你可以加粗字體少梁、設(shè)置列表、插圖制表律想,但是平臺(tái)期待你手動(dòng)完成上述工作猎莲。

我曾經(jīng)圍繞著如何用Markdown排版微信公眾號(hào)的問(wèn)題绍弟,寫(xiě)了好幾篇文章技即。有的文章寫(xiě)了將近一年,還有新讀者在點(diǎn)贊樟遣。

這讓我很慚愧而叼。因?yàn)榻荒暌詠?lái)身笤,我自己的Markdown寫(xiě)作和排版流程都發(fā)生了變化。現(xiàn)在你可以利用免費(fèi)的編輯器搭建更為舒適的寫(xiě)作環(huán)境葵陵,安裝插件更方便地上傳圖片到圖床液荸,同時(shí)應(yīng)用更好的樣式讓讀者在移動(dòng)設(shè)備上讀得更愉快

關(guān)于如何用Markdown排版微信公眾號(hào)的文章脱篙,已經(jīng)太多了娇钱。今天我們換一個(gè)話題,聊聊如何用Markdown排版知乎專欄文章绊困。其實(shí)文搂,本文的操作流程對(duì)微信公眾號(hào)、今日頭條等其他寫(xiě)作平臺(tái)都是通用的秤朗。

最近我在知乎專欄發(fā)布了一些文章煤蹭。比起其他寫(xiě)作平臺(tái),知乎的讀者似乎更喜歡在留言中與作者互動(dòng)取视。尤其是追問(wèn)式地拓展討論硝皂、探求真知。這給了作者(也就是我)很大鼓舞作谭。在此稽物,我把Markdown排版知乎專欄的技巧發(fā)布出來(lái),希望幫助更多的作者收獲這種創(chuàng)作和交流的喜悅折欠。

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

編輯器

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

這款編輯器最初的用戶农猬,大部分都是Geek和程序員赡艰。因?yàn)樗纳鷳B(tài)系統(tǒng)過(guò)于強(qiáng)大,所以就如同Emacs一樣斤葱,簡(jiǎn)直就是“偽裝成編輯器的操作系統(tǒng)”慷垮。

普通人寫(xiě)篇文章,原本是根本用不上這種大殺器的揍堕。

但是誰(shuí)叫Ulysses改成訂閱式了呢料身?

Atom,至少在目前衩茸,還是開(kāi)源免費(fèi)的芹血。

請(qǐng)到這個(gè)地址下載Atom編輯器。網(wǎng)站會(huì)根據(jù)你的操作系統(tǒng),自動(dòng)找到對(duì)應(yīng)的版本供你下載幔烛。

因?yàn)槲矣玫氖莔acOS啃擦,所以這里網(wǎng)站提供的是蘋(píng)果版本Atom。

下載之后饿悬,安裝運(yùn)行令蛉。然后你需要安裝2個(gè)插件。

第一個(gè)插件是幫你預(yù)覽Markdown用的狡恬,它叫做markdown-preview-enhanced珠叔。Markdown里,有圖片弟劲、表格和網(wǎng)頁(yè)鏈接运杭,如果沒(méi)有預(yù)覽功能,那你就得面對(duì)許多代碼一樣的東西函卒。對(duì)于非技術(shù)類寫(xiě)作者來(lái)說(shuō)辆憔,可能就會(huì)覺(jué)得不舒服了。

Atom編輯器安裝插件的方法很簡(jiǎn)單报嵌。

使用Cmd + ,呼叫配置菜單虱咧。注意我這里說(shuō)的是蘋(píng)果系統(tǒng)macOS上的操作。如果你用的是Windows锚国,請(qǐng)把所有出現(xiàn)的Cmd按鍵替換為Ctrl按鍵腕巡,或者查閱幫助文檔。下同血筑。

選擇左側(cè)邊欄的最后一項(xiàng)绘沉,那個(gè)+號(hào),用于安裝新的插件豺总。

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

點(diǎn)擊搜索結(jié)果中該插件的Install按鈕车伞。

很快,插件安裝好了喻喳。

點(diǎn)擊上圖中出現(xiàn)的Settings另玖。你會(huì)看到這個(gè)插件的一些選項(xiàng)。

下拉滑動(dòng)條到中間左右的位置表伦,你會(huì)看到一個(gè)叫做Image Uploader的選項(xiàng)谦去。請(qǐng)點(diǎn)擊右側(cè)的上下箭頭按鈕,選擇sm.ms蹦哼。

好了鳄哭,第一個(gè)插件安裝設(shè)置完成了。下面我們安裝第二個(gè)插件纲熏,叫做markdown-image-assistant妆丘。安裝方法和剛才的插件一樣锄俄,不贅述了。安裝好后你會(huì)看到這樣的顯示飘痛。

這里,我們不需要調(diào)整設(shè)置容握。

好了宣脉,編輯器配置完畢,下面我們開(kāi)始試用一下剔氏。

使用Cmd + N新建一個(gè)文件塑猖,保存名稱為test.md

然后我們輸入了這樣一些內(nèi)容谈跛。

Ctrl+Shift+M呼叫預(yù)覽羊苟,我們可以看到右側(cè)邊欄出現(xiàn)了Markdown排版后的樣子。

基礎(chǔ)的Markdown排版一般不會(huì)有什么問(wèn)題感憾,下面我們來(lái)看看最讓圖文寫(xiě)作者頭疼的項(xiàng)目——插圖蜡励。

插圖

我們用Markdown寫(xiě)作的時(shí)候,一般插圖都會(huì)使用本地文件阻桅。但是排版完成凉倚,打算發(fā)布的時(shí)候,這些本地文件卻是無(wú)法被寫(xiě)作平臺(tái)識(shí)別的嫂沉。因此很多人本地排版Markdown預(yù)覽效果之后稽寒,又需要在寫(xiě)作平臺(tái)上重新插圖一次。

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

有的人于是很激進(jìn)地選擇就在云端寫(xiě)作和插圖蚓土。這樣的好處是你寫(xiě)作時(shí)候的插圖就可以直接發(fā)布宏侍,缺點(diǎn)是本地沒(méi)有副本。

這很不安全蜀漆。因?yàn)閷?xiě)作平臺(tái)也未必保證永續(xù)經(jīng)營(yíng)负芋。如果某一天平臺(tái)宣布停止運(yùn)營(yíng),你放置其上的一堆圖片怎么辦嗜愈?

所以旧蛾,最為貪婪的想法是——我在編輯器插圖,在本地存留備份蠕嫁,同時(shí)自動(dòng)上傳一份插圖到云端圖床锨天,以便發(fā)布使用。

你是不是覺(jué)得我這像是在做白日夢(mèng)剃毒?

不是病袄,其實(shí)這樣的設(shè)置你已經(jīng)做好了搂赋。

不信?

現(xiàn)在我們就試一下益缠。

我們?cè)诰W(wǎng)上找到了一幅圖片脑奠。

我們把圖片存儲(chǔ)到本地,然后在Atom編輯器里找到合適的位置幅慌,把本地的那張圖片拖拽進(jìn)來(lái)宋欺,奇跡就發(fā)生了。

你可能會(huì)納悶——咦胰伍?我明明只插了一次圖像齿诞,為什么右側(cè)預(yù)覽里面有2張圖。

實(shí)際上骂租,你看左側(cè)的Markdown語(yǔ)句祷杈,是這樣的:

![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)

這里是兩個(gè)插圖語(yǔ)句寫(xiě)在了一行上。

第一部分是遠(yuǎn)程圖床的插圖代碼渗饮,其后跟著的是本地插圖代碼但汞。

這樣,你的一次拖拽互站,圖片就被保存在了本地assets目錄特占,并且同時(shí)被上傳到了云端。而相應(yīng)的代碼云茸,編輯器和插件都替你寫(xiě)好了是目。

排版

把純文本的Markdown文件,變成移動(dòng)互聯(lián)網(wǎng)上圖文并茂的漂亮文章标捺,你需要用合適的樣式文件來(lái)排版懊纳。樣式文件(css)替你操心哪里用幾號(hào)字,什么標(biāo)題用某種顏色亡容,以及段間距多少之類的瑣碎事嗤疯。

我目前使用的是尹航的css,他專門(mén)為移動(dòng)設(shè)備閱讀做了優(yōu)化闺兢。因?yàn)樯婕鞍鏅?quán)保護(hù)問(wèn)題茂缚,請(qǐng)自行搜索后下載,存儲(chǔ)為本地的css文件備用屋谭。

同類的css文件還有很多脚囊,例如李笑來(lái)、陽(yáng)志平都有各自的版本分享出來(lái)桐磁。請(qǐng)根據(jù)自己的口味進(jìn)行選擇悔耘。

選擇并存儲(chǔ)好css文件后,我們來(lái)安裝瀏覽器插件我擂。

請(qǐng)?jiān)贕oogle Chrome里面安裝Markdown Here插件衬以。

安裝后缓艳,右鍵點(diǎn)擊該插件圖標(biāo),在彈出菜單里單擊“選項(xiàng)”按鈕看峻。

找到上圖這個(gè)文本框阶淘,把你下載好的css文件內(nèi)容拷貝粘貼進(jìn)去。

然后打開(kāi)wangEditor互妓。

回到Atom編輯器里面溪窒,把左邊欄寫(xiě)好的Markdown格式文章全文拷貝,粘貼到wangEditor的編輯器窗口中车猬。

點(diǎn)擊Chrome的Markdown Here插件霉猛,你會(huì)立即看到排版后的結(jié)果尺锚。

確認(rèn)排版效果一切正常后珠闰,全選wangEditor編輯區(qū)域的內(nèi)容,拷貝瘫辩。

打開(kāi)知乎專欄的“寫(xiě)文章”功能伏嗜。

在“請(qǐng)輸入正文”的部分,粘貼伐厌。

你會(huì)看到承绸,云端圖床的圖片正常顯示,本地鏈接圖片沒(méi)有正常上傳挣轨。不過(guò)這絲毫沒(méi)有關(guān)系军熏。

因?yàn)楫?dāng)你預(yù)覽或者發(fā)布的時(shí)候,看到的內(nèi)容是這個(gè)樣子的:

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

討論

你平時(shí)都在哪些寫(xiě)作平臺(tái)上發(fā)布文章?你使用Markdown了嗎晤锹?使用過(guò)程中有什么心得體會(huì)摩幔?遇到過(guò)哪些問(wèn)題?相比本文鞭铆,你是否有更好的編輯排版流程或衡?你使用的編輯器是否更有特色?歡迎留言车遂,記錄下你的思考封断,我們一起交流討論。

如果你對(duì)我的文章感興趣舶担,歡迎點(diǎn)贊澄港,并且關(guān)注我的文集“玉樹(shù)芝蘭”。

如果本文可能對(duì)你身邊的親友有幫助柄沮,也歡迎你把本文通過(guò)微博或朋友圈分享給他們回梧。讓他們一起參與到我們的討論中來(lái)废岂。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市狱意,隨后出現(xiàn)的幾起案子湖苞,更是在濱河造成了極大的恐慌,老刑警劉巖详囤,帶你破解...
    沈念sama閱讀 206,311評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件财骨,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡藏姐,警方通過(guò)查閱死者的電腦和手機(jī)隆箩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)羔杨,“玉大人捌臊,你說(shuō)我怎么就攤上這事《挡模” “怎么了理澎?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,671評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)曙寡。 經(jīng)常有香客問(wèn)我糠爬,道長(zhǎng),這世上最難降的妖魔是什么举庶? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,252評(píng)論 1 279
  • 正文 為了忘掉前任执隧,我火速辦了婚禮,結(jié)果婚禮上户侥,老公的妹妹穿的比我還像新娘镀琉。我一直安慰自己,他們只是感情好添祸,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布滚粟。 她就那樣靜靜地躺著,像睡著了一般刃泌。 火紅的嫁衣襯著肌膚如雪凡壤。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,031評(píng)論 1 285
  • 那天耙替,我揣著相機(jī)與錄音亚侠,去河邊找鬼。 笑死俗扇,一個(gè)胖子當(dāng)著我的面吹牛硝烂,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播铜幽,決...
    沈念sama閱讀 38,340評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼滞谢,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼串稀!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起狮杨,我...
    開(kāi)封第一講書(shū)人閱讀 36,973評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤母截,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后橄教,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體清寇,經(jīng)...
    沈念sama閱讀 43,466評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評(píng)論 2 323
  • 正文 我和宋清朗相戀三年护蝶,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了华烟。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,039評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡持灰,死狀恐怖盔夜,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情搅方,我是刑警寧澤比吭,帶...
    沈念sama閱讀 33,701評(píng)論 4 323
  • 正文 年R本政府宣布绽族,位于F島的核電站姨涡,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏吧慢。R本人自食惡果不足惜涛漂,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望检诗。 院中可真熱鬧匈仗,春花似錦、人聲如沸逢慌。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,259評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)攻泼。三九已至火架,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間忙菠,已是汗流浹背何鸡。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留牛欢,地道東北人骡男。 一個(gè)月前我還...
    沈念sama閱讀 45,497評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像傍睹,于是被迫代替她去往敵國(guó)和親隔盛。 傳聞我的和親對(duì)象是個(gè)殘疾皇子犹菱,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評(píng)論 2 345

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

  • 作者:王子亭 Atom 是 GitHub 在 2014 年發(fā)布的一款基于 Web 技術(shù)構(gòu)建的文本編輯器,我從 20...
    LeanCloud官方帳號(hào)閱讀 3,060評(píng)論 0 13
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)吮炕、插件已亥、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,024評(píng)論 4 62
  • 你是我走不出的柏林墻,一面我親手建造的柏林墻
    未來(lái)無(wú)歌閱讀 133評(píng)論 0 0
  • Tablayout是什么 Tablayout的使用 1.首先必須導(dǎo)入谷歌的依賴包 2. 創(chuàng)建布局(2種方式)I.在...
    Tuttonero閱讀 3,321評(píng)論 2 5
  • 我們雖可以靠父母和親戚的庇護(hù)而成長(zhǎng)来屠,倚賴兄弟和好友虑椎,借交游的扶助,因愛(ài)人而得到幸福俱笛,但是無(wú)論怎樣捆姜,歸根結(jié)底人類還是...
    吾愛(ài)絲語(yǔ)閱讀 306評(píng)論 0 0