本文作者尹航歐巴，轉載自公眾號“尹航歐巴（idaodaoxi）

你的時(shí)間是用來(lái)寫(xiě)作的，不是用來(lái)排版的

看到很多人通過(guò)寫(xiě)作獲得了不少財富，想必你也希望成為這樣的人吧！人人都是自媒體的時(shí)代，每個(gè)人都會(huì )有沖動(dòng)開(kāi)一個(gè)公眾號。

而真正開(kāi)始寫(xiě)的時(shí)候，就會(huì )發(fā)現一個(gè)非常重要的問(wèn)題：寫(xiě)文章本身已然耗費了很多精力，寫(xiě)完之后還要操心排版的事情，真的讓人心力交瘁。

為了讓所有公眾號的作者，能夠把最寶貴的精力用在寫(xiě)作上，這次我將“一鍵排版”的方法教給大家，以后就再也不用操心排版的事情了。

今天給大家介紹一個(gè)排版的終極武器：Markdown Here。

這是一款瀏覽器的插件，在你設定好排版的格式之后，就可以幫你實(shí)現“一鍵排版”的效果。為了實(shí)現這么爽的效果，需要大家擁有兩類(lèi)知識：

markdown
CSS

這些知識看起來(lái)和編程有點(diǎn)關(guān)系，所以不少同學(xué)看到了就有點(diǎn)發(fā)慌，還沒(méi)開(kāi)始估計就想要打退堂鼓了。不過(guò)別擔心，這篇文章可以把你從排版的苦海里拯救出來(lái)了。

閑話(huà)不多說(shuō)，我們一個(gè)一個(gè)來(lái)。

1.markdown

先來(lái)說(shuō)說(shuō)markdown。Markdown是個(gè)啥？官方給出的定義是：

markdown是一種可以使用普通文本編輯器編寫(xiě)的標記語(yǔ)言，通過(guò)簡(jiǎn)單的標記語(yǔ)法，它可以使普通文本內容具有一定的格式。

看著(zhù)好像說(shuō)得有模有樣，其實(shí)還是讓人一頭霧水，啥是“標記語(yǔ)言”？啥是“標記語(yǔ)法”？啥是“一定的格式”？

如果你繼續搜索“標記語(yǔ)言”，它又會(huì )給出另一個(gè)像模像樣的說(shuō)法：標記語(yǔ)言是一種將文本以及文本相關(guān)的其他信息結合起來(lái)，展現出關(guān)于文檔結構……

每次遇到這種情況我都想罵娘。你不能總用我不清楚的概念去解釋另一個(gè)我不懂的東西??！那我不還是一臉懵逼嗎！所以大家就別找什么官方的說(shuō)法了，那都是弄懂了之后回過(guò)頭才能看懂的東西，不明白的時(shí)候，看著(zhù)就是天書(shū)。

好，我們重新來(lái)一遍：markdown是啥？按照普通人能聽(tīng)懂的解釋?zhuān)矣X(jué)得應該這么說(shuō)：

markdown是一種你和電腦交流的“外語(yǔ)”，你用它給電腦寫(xiě)便簽，告訴它如何給你的文章排版。

記住，markdown就是一種“外語(yǔ)”，你用它給電腦寫(xiě)便簽，就像你給同事朋友寫(xiě)的便簽一樣，是為了提醒TA做一件事兒的。

舉個(gè)例子，如果你有錢(qián)雇一個(gè)編輯，那你就可以讓TA幫你排版，而你則可以專(zhuān)注于寫(xiě)作。

比如我們拿上一段的文字舉例，如果你希望寫(xiě)完文章后，直接丟給編輯，TA就能知道你想要如何排版，那你需要怎么做？

我猜，你大致會(huì )這么寫(xiě)文章：

每次遇到這種情況我都想罵娘（“罵娘”加粗）。你不能總用我不清楚的概念去解釋我不懂的東西??！那我不還是一臉懵逼嗎?。ā啊卤茊?！”這句話(huà)字體為紅色）所以大家就別找官方的什么說(shuō)法了，那都是弄懂了之后回過(guò)頭看才清楚的東西，不懂的時(shí)候，看著(zhù)就是天書(shū)（“天書(shū)”這兩個(gè)字用斜體）。

上面文章括號中的文字，就是我給編輯留的“便簽”，告訴TA我想把這段話(huà)變成什么樣的，至于行間距，字體的樣式，我都可以用同樣的方法給TA留言，然后我就不用管了，讓TA自己去做就好了。

問(wèn)題在于，我們現在沒(méi)錢(qián)請編輯，我們只有電腦，但是電腦又讀不懂括號里的中文，所以我們就發(fā)明了markdown這種“外語(yǔ)”，專(zhuān)門(mén)用來(lái)給“電腦編輯”寫(xiě)便簽，告訴它要怎么排版。

那具體怎么寫(xiě)呢？現在就來(lái)介紹一下。

我們在寫(xiě)文章的過(guò)程中，其實(shí)需要的排版并不是很多，無(wú)非是大標題，小標題，加粗，加斜體，引用，列表。所以markdown這門(mén)“外語(yǔ)”并不難學(xué)，你想想這是給電腦這個(gè)機器看的東西，它能難到哪里去？

咱們一個(gè)個(gè)來(lái)，別怕~

1.大標題

除了文章的標題之外，我們在文章正文中可能還需要一些大標題。那我們就可以在這個(gè)標題之前寫(xiě)上一個(gè)“#”，然后空一格，再把標題名稱(chēng)寫(xiě)進(jìn)去。就像這樣

這個(gè)便簽就相當于告訴電腦，這是一個(gè)大標題，給我排版成大標題，于是電腦就根據你之前的設定（怎么設定？這個(gè)后面會(huì )講），把它排成一個(gè)大標題的樣子。

2.小標題

有了大標題，還需要起一個(gè)小標題，那么就可以在標題之前寫(xiě)上兩個(gè)“##”，然后空格，加上小標題就可以了。就像這樣

這個(gè)便簽就相當于告訴電腦，這是一個(gè)小標題，給我排版成小標題，于是電腦就根據你之前的設定，把它排成一個(gè)小標題的樣子。

3.加粗

我們在寫(xiě)作的時(shí)候，需要有強調的部分，比如某個(gè)句子或者某個(gè)詞，這時(shí)候只需要用兩個(gè)“**”把它們夾起來(lái)就可以了。像這樣

這就相當于告訴電腦，這是重點(diǎn)部分，給我加粗，當然也可以加一些顏色。

4.加斜體

如果你的文章中，有需要大段引用他人文字的部分，最好用斜體標記一下，讓別人知道自己跳戲了。這個(gè)時(shí)候，你需要用兩個(gè)“*”把相應的文字夾起來(lái)。像這樣

電腦看到這部分的東西之后，就會(huì )知道這是需要加斜體的部分，然后就會(huì )給你自動(dòng)排版。

5.引用

所謂的引用，在我看來(lái)其實(shí)是“更加強調”，比如我的文章中，經(jīng)常能看到換一行，然后用特殊的形式表達一下重點(diǎn)看法。我在文檔中寫(xiě)這些文字的時(shí)候，其實(shí)它們是長(cháng)這個(gè)樣子的。

電腦識別出“>”這個(gè)符號之后，就知道我需要引用了。

6.列表

無(wú)序列表的符號是是“-”，有序列表就是正常的“1.”，“2.”。

這里有幾個(gè)需要強調的是，所有的這些便簽寫(xiě)完之后，一定要空格，這樣電腦才能知道“哦，這是給我留言呢”，不然它會(huì )以為這是正常文字中的一部分，而對此毫無(wú)感覺(jué)。

還有就是“#”，“>”這兩個(gè)符號，一定要在行首，不要空格，否則會(huì )引起識別的問(wèn)題。

有同學(xué)可能會(huì )問(wèn)了，那如果是圖片呢？圖片的粘貼也是非常重要的排版步驟，怎么能夠落下呢？

依據我個(gè)人的經(jīng)驗，圖片這部分還是不要用Markdown會(huì )比較好，因為這涉及到圖片鏈接的問(wèn)題，引用網(wǎng)絡(luò )圖片還是不夠穩定，所以我建議圖片這部分，正常去粘貼會(huì )比較方便。

總結一下，所謂的markdown就是你在寫(xiě)作的時(shí)候，給電腦的留言，告訴它要如何處理相應的文字，是加粗還是引用，在文章中給它留個(gè)便簽就可以了。

我現在知道怎么寫(xiě)了，問(wèn)題是在哪里寫(xiě)呢？好多同學(xué)以為markdown是一個(gè)工具，就像word和ppt一樣，看過(guò)上面的講解之后，你應該知道，它只是一種“外語(yǔ)”，就像是英語(yǔ)一樣。就像不存在一個(gè)只能寫(xiě)英語(yǔ)的軟件一樣，同樣也不存在只能寫(xiě)markdown的軟件。

最簡(jiǎn)單的其實(shí)就是你電腦上的記事本或者筆記本。你在上面寫(xiě)英語(yǔ)，那就是一篇英文文章，你用markdown的格式寫(xiě)，那就是一篇markdown的文章。

當然如果你去搜索，還是能找到一些針對markdown的編輯軟件，它們只不過(guò)是整合了CSS的功能的一個(gè)高級記事本而已，本質(zhì)上還是一個(gè)寫(xiě)作工具。比如我經(jīng)常使用的一個(gè)在線(xiàn)編輯器，叫做“作業(yè)部落”，每次寫(xiě)完文章之后，基本上是這個(gè)樣子的。

我把這部分的文字，復制粘貼到微信公號的編輯器中，就會(huì )是這個(gè)樣子的。

然后，我只需要點(diǎn)擊一下瀏覽器右上角的這個(gè)圖標。

它就會(huì )變成這個(gè)樣子。

至于為什么會(huì )變成這個(gè)樣子，那就是下面要講的CSS的功勞了。

2.CSS

我就不說(shuō)CSS的官方定義了，直接說(shuō)我的理解：

所謂的CSS，其實(shí)也是一種“外語(yǔ)”，你用它來(lái)告訴電腦，剛才的便簽要如何顯示。

如果說(shuō)markdown是找出你想要排版的內容，那么CSS就是告訴電腦，要對這些內容做什么。

你用markdown告訴電腦，這部分要加粗。那你要多大的字號？呈現什么顏色呢？你告訴它這段要引用，那應該用什么樣的字體？要配什么裝飾？這些都是需要你通過(guò)CSS這個(gè)外語(yǔ)，來(lái)給電腦留言的。

其實(shí)當你用markdown的時(shí)候，它已經(jīng)自帶了一套顯示的設置，只不過(guò)它非常單調，也沒(méi)什么太大意思，如果你能忍受這一部分的內容，其實(shí)也可以。只不過(guò)我們希望有更多的私人定制，自然也就需要多學(xué)那么一點(diǎn)點(diǎn)的東西了。

CSS的寫(xiě)法一般是這樣的。

有時(shí)候留言?xún)热荼容^多，所以我們需要讓每個(gè)留言都換行，這樣看起來(lái)就方便一些，所以通常的形式會(huì )是這樣的。

我挑幾個(gè)例子，具體給大家說(shuō)一下，大家就能明白了。

1.大標題

我們剛才提到了，文章中的大標題，需要你在標題前加上一個(gè)“#”，然后空格，加上你想寫(xiě)的標題。電腦看到了這個(gè)信息之后，就會(huì )想要問(wèn)你，這個(gè)大標題你想咋弄嘞？

于是你再給它多留一句話(huà)，這句話(huà)的模板是

這里的“h1”對應的就是markdown里面的一個(gè)“#”，也就是大標題，相應的“##”對應的就是“h2”。

而留言的內容可以有顏色“color”，可以有字體大小“font-size”，可以有段后距“margin-bottom”等等。

寫(xiě)好了之后，就是這個(gè)樣子了。

翻譯過(guò)來(lái)就是

顯示的樣子就會(huì )是這種

2.引用

引用也是一個(gè)比較重要的排版，做好看了還是很有成就感的。一般來(lái)說(shuō)，引用的部分，都會(huì )在前面留一個(gè)豎線(xiàn)，然后把字體顏色調整一下。寫(xiě)出來(lái)大概是這個(gè)樣子。

翻譯過(guò)來(lái)是這樣的

這樣顯示出來(lái)的樣子，大概就是這種

3.文章本身

除了剛才說(shuō)的那些大標題之外，文章本身的顯示也很重要，我們雖然沒(méi)有做過(guò)什么標記，但是可以讓電腦整體地做一個(gè)調整。相應給CSS留言，可以寫(xiě)成這個(gè)樣子

這里的“p”其實(shí)就是paragraph（段落）的首字母，整個(gè)留言翻譯過(guò)來(lái)就是

大家可以看一下同一個(gè)段落，在使用前后的對比

這里只是舉了幾個(gè)例子，相應的CSS語(yǔ)言還有很多細節的東西，大家可以去網(wǎng)上找一下，我的磚算是拋出去了，看你們有沒(méi)有耐心了~

我們跳到下一個(gè)問(wèn)題：這樣的留言寫(xiě)好了之后，放在哪里呢？剛才說(shuō)的markdown文章，你可以直接貼到相應發(fā)布平臺的編輯器里，而剛才寫(xiě)好的CSS留言，你需要放到一個(gè)特定的位置，那就是Markdown-Here的設置欄。

當然首先你需要在瀏覽器里安裝這個(gè)插件。

它的官方網(wǎng)址是：https://markdown-here.com/

點(diǎn)擊導航欄的“Get it!”，然后跳轉到插件的安裝頁(yè)面。

這里會(huì )提供幾個(gè)常用瀏覽器的插件安裝地址，我用的是谷歌的Chrome瀏覽器，如果大家訪(fǎng)問(wèn)谷歌有困難，可以試著(zhù)用Firefox或者Opera的瀏覽器。

安裝完之后，就可以在瀏覽器中看到相應的插件了?？吹綖g覽器右上角的那個(gè)Markdown-Here的圖標了嗎？那個(gè)就是我們排版的神器了。

右鍵點(diǎn)擊一下，然后選擇Option（選項），進(jìn)入它的設置頁(yè)面