本文不需要任何計(jì)算機(jī)編程知識(shí)谓着，它將從零基礎(chǔ)教你使用Markdown+CSS的方法實(shí)現(xiàn)微信公眾號(hào)高效排版泼诱。
相信絕大部分自媒體的從業(yè)者或創(chuàng)業(yè)者在經(jīng)營(yíng)自己的公眾號(hào)時(shí)，都在排版方面遇到不少頭痛的問(wèn)題赊锚，往往排版所花的時(shí)間兩倍甚至數(shù)倍于內(nèi)容寫(xiě)作的時(shí)間治筒。市面上基于富文本排版的編輯器不少，主流的比如秀米舷蒲、135等耸袜，當(dāng)然微信公眾平臺(tái)本身也自帶極其簡(jiǎn)陋的富文本編輯器。目前主流的編輯器都提供各種琳瑯滿目的素材阿纤、模板句灌、掛件等等，然而我的大腦對(duì)此是拒絕欠拾，因?yàn)榻^大部分文章可能只需要最簡(jiǎn)單最直接的排版胰锌，如設(shè)置標(biāo)題、插入圖片和鏈接等藐窄，相比花哨资昧，我更喜歡簡(jiǎn)單便捷和高效【Ｈ蹋總的來(lái)說(shuō)秀米一類(lèi)的富文本編輯器有以下幾個(gè)痛點(diǎn)：
- 手工調(diào)整各種圖片/表格/流程圖等非常繁瑣格带，還經(jīng)常難以對(duì)齊
- 每一篇新文章可能大部分內(nèi)容都需要重新編排
- 相同內(nèi)容在多平臺(tái)(如簡(jiǎn)書(shū)、知乎)發(fā)布時(shí)可能遇到各種不兼容不對(duì)齊的問(wèn)題
那么有沒(méi)有什么解決方案呢刹枉？答案是肯定的叽唱。
使用Markdown標(biāo)記語(yǔ)言+CSS+MarkdownHere可以一站式系統(tǒng)性解決這些問(wèn)題。 網(wǎng)絡(luò)上有很多介紹Markdown如何使用的文章微宝，大多都支離破碎棺亭，研究起來(lái)非常痛苦。經(jīng)過(guò)幾天艱苦考古蟋软，決定按照自己實(shí)踐的思路的重新敘述一遍镶摘。讀完這篇文章后基本可以從零基礎(chǔ)用Markdown實(shí)現(xiàn)公眾號(hào)文章的排版嗽桩。
初識(shí)Markdown和CSS
Markdown是由John Gruber于2004年研發(fā)的一種”輕量級(jí)”標(biāo)記語(yǔ)言，當(dāng)然就是上面這位哥們了; 而CSS (Cascading Style Sheets) 則是目前廣泛應(yīng)用于互聯(lián)網(wǎng)前端修飾的計(jì)算機(jī)語(yǔ)言凄敢。你暫時(shí)不需要理解這些概念碌冶，只要記住他們的名字就可以了。他們協(xié)作的原理通俗的來(lái)說(shuō)就是：通過(guò)在你所編輯的文本內(nèi)容里添加Markdown語(yǔ)言所定義的一些特殊標(biāo)記符號(hào)涝缝，告訴計(jì)算機(jī)你所希望排版的格式扑庞，譬如哪些是段落/標(biāo)題，同時(shí)配合CSS提供一個(gè)排版渲染的模板拒逮，譬如字體的格式/大小/行間距等嫩挤，剩下的事情則由計(jì)算機(jī)自動(dòng)完成。 更簡(jiǎn)單的說(shuō)就是：
- Markdown負(fù)責(zé)給出排版的整體框架和規(guī)則
- CSS負(fù)責(zé)完成和實(shí)現(xiàn)排版的具體細(xì)節(jié)內(nèi)容
舉個(gè)簡(jiǎn)單的例子就更加直觀了消恍。以下文本中加入了Markdown中一些常用的標(biāo)簽，如一級(jí)標(biāo)題 (#)以现、無(wú)序表 (-)狠怨、有序表 (1.)、引用 (>)邑遏、粗體 (**)和斜體 (***)等佣赖。
#我是一級(jí)標(biāo)題
- 我是無(wú)序表
1. 我是有序表
>我是引用
**我是粗體**
***我是斜體***
經(jīng)過(guò)CSS渲染后效果圖如下：
我是一級(jí)標(biāo)題
- 我是無(wú)序表
- 我是有序表
我是引用
我是粗體
我是斜體
這里所用的就是本文CSS定義的效果圖，有關(guān)CSS模板的使用會(huì)在后面詳細(xì)介紹记盒。
快速實(shí)現(xiàn)公眾號(hào)文章排版
在簡(jiǎn)單的介紹Markdown和CSS后憎蛤，我們廢話不多說(shuō)，直接來(lái)實(shí)戰(zhàn)纪吮。為了實(shí)現(xiàn)公眾號(hào)文章排版俩檬，需要用到以下工具：
- 一個(gè)好用的Markdown編輯器
- Chrome瀏覽器用來(lái)打開(kāi)微信公眾平臺(tái)
- 一個(gè)叫MarkdownHere的Chrome瀏覽器插件
這是親身排坑后給新手推薦的一個(gè)流程。理論上編輯Markdown排版不需要任何特殊的編輯器碾盟，你甚至可以在記事本上完成棚辽，包括近兩年比較火的簡(jiǎn)書(shū)自媒體平臺(tái)，本身就是一個(gè)基于云端的Markdown編輯器冰肴。但如果你希望能脫離平臺(tái)持續(xù)在自己電腦上工作屈藐，還是需要一個(gè)功能強(qiáng)大的Markdown編輯器，比較著名的有Ulysses/Typora/Atom/Miu/馬克飛象等等熙尉，在這里只推薦一個(gè)Atom联逻，理由如下：
- 它免費(fèi) (免費(fèi)的陽(yáng)光，免費(fèi)的空氣检痰，免費(fèi)的Atom)
- 它專(zhuān)業(yè) (專(zhuān)業(yè)程序員級(jí)別的編輯器)
- 它跨平臺(tái) (支持Win/Mac/Linux全平臺(tái))
- 它功能強(qiáng)大 (提供各種方便的安裝包)
首先可以直接在官網(wǎng)下載并安裝Atom客戶端包归，在客戶端可以直接打開(kāi)或者新建一段經(jīng)Markdown編排好的文本，客戶端自帶的一個(gè)插件Markdown Preview可以實(shí)現(xiàn)文章預(yù)覽功能攀细，具體路徑在Packages->Markdown Preview->Toggle Preview或者快捷鍵Ctrl+Shift+M箫踩，例如本文為案例預(yù)覽如下圖所示：
然后打開(kāi)瀏覽器安裝一個(gè)叫MarkdownHere的插件,它是一個(gè)基于Chrome瀏覽器的小插件爱态，可以幫助你把Markdown編排好的文本經(jīng)過(guò)CSS渲染轉(zhuǎn)化成微信公眾平臺(tái)所需要的富文本。安裝后會(huì)在瀏覽器右上看到一個(gè)如下圖的小圖標(biāo)：
點(diǎn)擊右鍵->Options就能進(jìn)入MarkdownHere的菜單境钟，如下圖所示锦担。右下方的Theme顯示當(dāng)前使用的CSS渲染模板，下拉菜單里提供了很多默認(rèn)風(fēng)格主題的模板慨削，你也可以在Syntax Highlighting CSS里粘貼或者編輯一個(gè)自定義的CSS模板洞渔，你可能需要一點(diǎn)CSS的知識(shí)，我們會(huì)在后續(xù)的文章里詳細(xì)講解缚态，大部分時(shí)候可以直接復(fù)制粘貼一些別人的模板磁椒。左下角的Reset to Default可以隨時(shí)幫你恢復(fù)成默認(rèn)主題。
最后只需要微信公眾平臺(tái)里新建一個(gè)素材玫芦，把在Atom里編排好的Markdown文本粘貼到公眾平臺(tái)的編輯器里：
單擊瀏覽器右上MarkdownHere的小圖標(biāo)浆熔，會(huì)看到粘貼的文章按CSS模板轉(zhuǎn)化成立富文本的格式，這樣就完成了自動(dòng)排版同時(shí)可以發(fā)布了桥帆。
Atom本身還有許多強(qiáng)大的功能可以通過(guò)安裝擴(kuò)展包輕松實(shí)現(xiàn)医增，比如自定義調(diào)節(jié)CSS模板、把排版文章轉(zhuǎn)化成PDF格式老虫，這些內(nèi)容將在后續(xù)的文章給大家介紹叶骨。關(guān)于本文章使用的CSS渲染模板，可以通過(guò)關(guān)注我們的公眾號(hào)獲取祈匙。
常用的Markdown排版功能
經(jīng)過(guò)簡(jiǎn)單的實(shí)踐我們熟悉了用Markdown排版公眾號(hào)的基本流程忽刽，最后我們?cè)俸?jiǎn)單介紹下一些排版中常用的Markdown標(biāo)簽。以下表格里列舉了一些最常用的標(biāo)簽的具體用法夺欲，基本能滿足70%-80%的排版需求跪帝。
可以自己嘗試著在編輯器里使用這些Markdown標(biāo)簽，看看效果洁闰。還有些比較進(jìn)階的用法歉甚，比如：
插入表格
示例：
| Header1 | Header2 |
|---------|---------|
| a | a |
| ab | ab |
| abc | abc |
| Header1 | Header2 |
|---|---|
| a | a |
| ab | ab |
| abc | abc |
效果：
| Header1 | Header2 |
|---|---|
| a | a |
| ab | ab |
| abc | abc |
插入網(wǎng)頁(yè)鏈接
示例：
[百度](http://www.baidu.com/)
效果：
百度
插入代碼塊
在句子內(nèi)插入代碼格式為：`Hello World`, 在內(nèi)容前后各加一個(gè)[`]符號(hào)，效果為:
Hello World
如果希望插入整段的代碼扑眉，可以用格式:
其中C++關(guān)鍵字是用來(lái)支持語(yǔ)法高亮纸泄，可以根據(jù)實(shí)際改成其他代碼語(yǔ)言，效果圖如下：
int main()
{
return 0;
}
插入圖片
Markdown插入圖片是個(gè)稍微麻煩的事情腰素，它使用一種和鏈接很相似的語(yǔ)法來(lái)標(biāo)記圖片,具體為：
其中Alt text為圖片失效時(shí)候的替代文字聘裁，/path/to/img.jpg則是圖片的鏈接。它可以是網(wǎng)絡(luò)圖片的鏈接弓千，也可以是圖片在當(dāng)前電腦上的絕對(duì)路徑衡便。另一種方法是可以利用HTML的標(biāo)簽插入圖片：
<img src="/path/to/img.jpg"/>
然而不管是哪一種，都需要提供一個(gè)圖片的路徑，當(dāng)發(fā)布到公眾平臺(tái)的時(shí)候镣陕，圖片鏈接很容易失效谴餐。一個(gè)比較簡(jiǎn)單的解決辦法是：在用MarkdownHere把排版文本完成渲染后，由于此時(shí)在公眾平臺(tái)編輯器里的文本已經(jīng)轉(zhuǎn)化成立了富文本呆抑，因此簡(jiǎn)單的重新剪切+粘貼后 (Ctrl+X->Ctrl+V)岂嗓，圖片會(huì)保留在微信的編輯器里，這樣再發(fā)布就不會(huì)丟失了鹊碍。
另一種辦法是用網(wǎng)絡(luò)圖床去存儲(chǔ)要發(fā)布的圖片厌殉，在后續(xù)的文章里我們?cè)僭敿?xì)介紹。
寫(xiě)在最后
Markdown還有很多強(qiáng)大的功能侈咕，比如畫(huà)甘特圖 (gant chart) 和插入數(shù)學(xué)公式公罕，這里就不一一舉例了，可以在需要使用時(shí)候再學(xué)習(xí)耀销。相比傳統(tǒng)的秀米式排版方法楼眷，Markdown可能相對(duì)來(lái)說(shuō)素材可能并不是很豐富，而且也需要成本去學(xué)習(xí)熊尉，但是熟練之后其速度和效率不是傳統(tǒng)的排版方式可以比擬的摩桶。你可以想象如果要在多個(gè)自媒體平臺(tái)像本文一樣排版這么多圖標(biāo)代碼塊，需要花費(fèi)多少時(shí)間帽揪。有些事情入門(mén)門(mén)檻低，往往到了后期需要很多代價(jià)去維護(hù)辅斟；而有些事情開(kāi)始門(mén)檻比較高转晰，到了后期卻異常高效。 新手可以選擇兩種排版方式并存來(lái)適應(yīng)日常寫(xiě)作需求士飒，在新媒體發(fā)展如此迅速的時(shí)代查邢，時(shí)間，效率和量能才是王道酵幕。
轉(zhuǎn)載請(qǐng)?zhí)砑庸娞?hào)(BeautifulElite)聯(lián)系作者
