寫(xiě)在前面
關(guān)于中文排版咒循，李笑來(lái)曾說(shuō)：“中文不像英文据途，筆畫(huà)較多。擁?yè)頂D擠非常難看叙甸。文章排版美觀主要集中在三點(diǎn)：字體大小、行間距位衩、字間距裆蒸。”
應(yīng)對(duì)以上中文寫(xiě)作困境糖驴，有一個(gè)瀏覽器插件正好可以匹配這些既有問(wèn)題僚祷，文章排版美感得到解決。
具體是怎樣的效果呢贮缕？我拿自己先后寫(xiě)的文章做個(gè)對(duì)比：
左邊部分是經(jīng)過(guò)插件渲染后辙谜，右邊沒(méi)有經(jīng)過(guò)任何處理。我想感昼，這個(gè)時(shí)候大家心里也有了答案装哆。如果你感覺(jué)不錯(cuò)，也想要實(shí)現(xiàn)這樣的效果，就跟隨我一起完成下面的步驟蜕琴。
對(duì)了萍桌，這篇教程是建立在你用Markdown格式寫(xiě)作的前提下，只有這樣凌简，那個(gè)瀏覽器插件才知道我要渲染誰(shuí)上炎，把哪些文字變大，把哪些文字加粗雏搂。如果你沒(méi)有用這種格式寫(xiě)作藕施，也就做不到那種效果。
在正式操作之前凸郑，我們有必要先認(rèn)識(shí)一下這個(gè)插件铅碍。
Markdown Here
Markdown Here 是個(gè)瀏覽器插件（Chrome/Firefox/Safari），可以將瀏覽器中編輯器里的 Markdown 文本轉(zhuǎn)換成渲染過(guò)后的 HTML线椰。
如果你看到了一些陌生的概念胞谈，比如：“HTML”。先不要去管它憨愉。因?yàn)檫@些并不影響我們的具體操作烦绳。
下面，我根據(jù)李笑來(lái)老師提供的流程框架配紫，然后結(jié)合我自己的經(jīng)驗(yàn)径密，開(kāi)始我們的文章排版最后一站（以后只管用Markdown格式寫(xiě)作，然后將文章復(fù)制到將要發(fā)布的微信編輯器里面躺孝，進(jìn)行快捷鍵轉(zhuǎn)化享扔，發(fā)布就可以了）。
操作流程
1： 在 Firefox 中安裝 Markdown Here 插件
以火狐瀏覽器為例（和谷歌類(lèi)似）植袍，首先進(jìn)入官網(wǎng)：
選擇常用的瀏覽器惧眠，下載匹配的瀏覽器插件。下載且安裝后于个，你會(huì)看到一個(gè)提示：“重啟瀏覽器”氛魁，你按照這個(gè)步驟往下走就可以了。重啟后厅篓，你就進(jìn)入到Markdown Here 頁(yè)面區(qū)域秀存，實(shí)際上是配置區(qū)域。在這里你只要關(guān)注兩個(gè)地方就可以了羽氮』蛄矗“基本渲染CSS”和“快捷鍵面板”。
到了這里档押，說(shuō)明你已經(jīng)完成了第一步：安裝澳盐。
2：配置 Markdown Here Option, 自定義一些 CSS
接下來(lái)的步驟最為重要祈纯，你將要在：“基本渲染CSS” 區(qū)域進(jìn)行你的CSS樣式配置。具體的做法是：
- 進(jìn)入我的代碼存放洞就；
- 復(fù)制這些CSS樣式盆繁；
- 回到樣式配置區(qū)域，進(jìn)行完整粘貼覆蓋旬蟋；
- 插件會(huì)自動(dòng)保存你的修改油昂；
- 結(jié)束……
這些CSS樣式代碼屬于李笑來(lái)老師的原創(chuàng)，我修改的地方很少倾贰。大致符合原貌冕碟。
為了大家也可以對(duì)代碼進(jìn)行一些個(gè)性化設(shè)置，其中一些基本配置參數(shù)需要講講匆浙。
下面是我們之前說(shuō)的文章排版美觀基本三要素：
- 字體大邪菜隆：17像素
- 行間距為：28.8像素
- 字間距為：1.6像素
對(duì)應(yīng)到CSS樣式：
.markdown-here-wrapper {
font-size: 17px;
line-height: 1.8em;
letter-spacing: 0.1em;
}
進(jìn)行了這些設(shè)置，你就可以做到上面那幅對(duì)比圖所展示的效果了首尼。當(dāng)然挑庶，除了這些基本配置外，李笑來(lái)老師還進(jìn)行了其它一些配置软能，如顏色搭配迎捺、字體加粗等等。
如果你也想把顏色調(diào)整一下或者其他操作查排，就需要CSS基本知識(shí)了凳枝。但本文并不打算討論這些；順便說(shuō)一下跋核，CSS屬于制作網(wǎng)頁(yè)的三要素之一岖瑰，是用來(lái)渲染網(wǎng)頁(yè)的。學(xué)習(xí)難度不大砂代，你可以試試看蹋订。
3： 在 馬克飛象 之類(lèi)的編輯器中書(shū)寫(xiě)
具有 Markdown 格式寫(xiě)作的工具有很多，比如大家接觸比較多的有道云筆記泊藕、簡(jiǎn)書(shū)都具備這樣的格式寫(xiě)作辅辩。我自己用這兩款工具寫(xiě)作的體會(huì)是，有道云筆記寫(xiě)作區(qū)域不能放大娃圆，這樣寫(xiě)作效率就會(huì)大大折扣，簡(jiǎn)書(shū)雖有全屏放大特性蛾茉，但美觀度也達(dá)不到讼呢。這兩款基本上就是湊合著用。
就在寫(xiě)這篇教程的時(shí)候谦炬，我找到了馬克飛象這個(gè)編輯器悦屏。也是看了介紹节沦，才知道它是為印象筆記服務(wù)的。印象筆記本身并無(wú)法Markdown格式寫(xiě)作础爬，這才有了后來(lái)的馬克飛象甫贯。我首推這款馬克飛象。除了剛才那兩點(diǎn)困境外看蚜，它還很好的和印象筆記進(jìn)行了融合叫搁，對(duì)于我經(jīng)常用印象筆記來(lái)寫(xiě)筆記的人來(lái)說(shuō)，無(wú)疑是一個(gè)巨大的福祉供炎。
4：拷貝粘貼到微信公共帳號(hào)的編輯器中
如果你采用我的建議：用馬克飛象寫(xiě)作渴逻。將會(huì)遇到一個(gè)問(wèn)題，復(fù)制編輯器內(nèi)的文字到微信編輯器中時(shí)音诫，順帶把馬克飛象的底色也給帶了過(guò)去惨奕。對(duì)此，我也很懊惱竭钝。解決方法也不難梨撞，就是復(fù)制到一個(gè)記事本當(dāng)中，再然后復(fù)制到微信編輯器當(dāng)中香罐。
5：使用 Markdown Here 渲染
這一步卧波，你需要知道渲染快捷鍵。這也可以進(jìn)行配置穴吹。當(dāng)把編輯區(qū)的文字復(fù)制到微信編輯器當(dāng)中后幽勒，就可以利用快捷鍵，進(jìn)行文字的渲染了港令。
6：插圖圖片啥容，修訂
其實(shí)，這算是文章排版的最后一個(gè)步驟顷霹。
但是咪惠，可能你不熟悉或者不小心碰到一個(gè)按鍵，就會(huì)導(dǎo)致渲染后的文章變得又回到了以前淋淀。這里要知道的是遥昧，渲染后可以進(jìn)行文字的更改，但不適合很大的改動(dòng)朵纷。
7：發(fā)布……
寫(xiě)在最后
這篇文章源于李笑來(lái)老師寫(xiě)的一篇文章“Markdown Here 教程”炭臭， 在那篇文章里，李笑來(lái)老師主要敘述了插件操作流程袍辞、以及中文文章排版的特點(diǎn)和插件鞋仍；我寫(xiě)的這篇文章主要側(cè)重于操作流程的實(shí)現(xiàn)，和那篇文章相比搅吁，我論述的比較詳細(xì)威创。
如果大家在操作中落午，遇到一些本文并沒(méi)有提及的問(wèn)題，歡迎大家后臺(tái)留言肚豺，我會(huì)幫助大家一一解決溃斋。
風(fēng)格更新 2017.11.4
這段文字解決兩個(gè)問(wèn)題，首先是解釋倉(cāng)庫(kù)代碼鏈接打不開(kāi)問(wèn)題吸申，另一個(gè)是我把樣式做了調(diào)整梗劫。
有簡(jiǎn)友問(wèn)：“代碼存放鏈接打不開(kāi)”。我解釋下呛谜，由于我倉(cāng)庫(kù)的代碼鏈接非常的長(zhǎng)在跳，所以我用短鏈接程序編輯了，變成了你們看到的這樣隐岛。之所以打不開(kāi)了猫妙，原因是短鏈接失效了。這是我疏忽導(dǎo)致的聚凹，以至于沒(méi)有CSS基礎(chǔ)的簡(jiǎn)友操作困難割坠。這次，我用簡(jiǎn)書(shū)自帶的鏈接功能就不會(huì)有這個(gè)問(wèn)題了妒牙。進(jìn)入我的代碼存放
另外彼哼，之前的CSS風(fēng)格大多部分是李笑來(lái)老師的原創(chuàng)，我拿過(guò)來(lái)做了微調(diào)湘今。之后敢朱，我制作了自己的風(fēng)格，風(fēng)格靈感來(lái)自Bootstrap技術(shù)文檔摩瞎。如果你經(jīng)乘┣看一些技術(shù)文檔，就會(huì)發(fā)現(xiàn)旗们，技術(shù)說(shuō)明文檔里的文字不僅簡(jiǎn)潔邏輯蚓哩，而且排版都還大方漂亮。所以上渴，我制作了這樣的風(fēng)格岸梨。
使用方法：
重要文字提示（加邊框變紅字體）
Markdown語(yǔ)法：** **
例子里面的（標(biāo)題）
Markdown語(yǔ)法： ** **
例子
Markdown語(yǔ)法： >
一般來(lái)講，寫(xiě)公眾號(hào)文章稠氮，標(biāo)題曹阔、重點(diǎn)說(shuō)明和例子用的頻率比較多，這些都影響著文章的排版隔披，所以次兆，我做了上面你看到的改變。
如果有幫助到你锹锰，請(qǐng)點(diǎn)擊喜歡芥炭。
2017.11.4 更新
題圖作者：Dustin Lee
圖片授權(quán)基于CC0協(xié)議
