我之前寫過一篇關(guān)于公眾號排版的文章，內(nèi)容偏介紹工具和方法，對于新手不具有動(dòng)手指導(dǎo)意義。
這篇更具實(shí)操性锄禽，只要跟著做就可以實(shí)現(xiàn)一鍵排版。
先說原理：使用markdown標(biāo)記語言寫文章靴姿，通過CSS樣式表將文章樣式格式化沃但，使用chrome+markdown here插件完成一鍵排版。
工具
首先說下我使用的工具：
1空猜、chrome瀏覽器绽慈，有各種好用的插件。
使用chrome在公眾號網(wǎng)頁后臺編輯文章辈毯，直接將markdown格式文章貼入編輯區(qū)坝疼，點(diǎn)擊markdown here插件，即可完成一鍵排版谆沃。
2钝凶、markdown here插件，可以通過CSS樣式表完成markdown格式文章的一鍵排版唁影。
https://markdown-here.com/get.html
這是下載地址耕陷，可能需要“梯子”~
安裝好以后，打開markdown here選項(xiàng)据沈，在紅框區(qū)域編輯樣式哟沫，可以實(shí)現(xiàn)文章樣式的調(diào)整。
為了方便大家快速上手锌介，在本公眾號后臺回復(fù)“樣式表”嗜诀，可獲取我這篇文章的排版樣式猾警。
下載CSS文件后，將內(nèi)容填至圖片中紅框位置即可使用隆敢。
3发皿、iPic圖床工具。
安裝該工具后拂蝎，只需在電腦上復(fù)制穴墅、剪切圖片，在iPic上就可以自動(dòng)上傳云端圖床温自。
點(diǎn)擊上傳的圖片玄货，可自動(dòng)復(fù)制圖片地址，直接插入文章即可使用捣作，就像下面這樣：
當(dāng)你習(xí)慣這種圖片使用方式誉结，一定會(huì)愛不釋手。
iPic是mac端軟件券躁，可直接在App Store下載。
如果是windows系統(tǒng)可以使用Fu掉盅，在這里下載：
https://github.com/klesh/fu/releases
4也拜、markdown編輯工具，并非必須趾痘，使用記事本慢哈、word文檔編寫都行。
我使用的是Atom永票，一種高級編程工具卵贱，可以安裝多種markdown標(biāo)記插件，使用方便侣集。
移動(dòng)端可以考慮使用錘子便簽（免費(fèi)）键俱，或者Day one（收費(fèi)），都支持markdown標(biāo)記世分。
移動(dòng)端寫文章還有個(gè)神器 - 語音輸入法编振，安卓手機(jī)可用科大訊飛語音輸入法。
蘋果直接使用自帶輸入法臭埋，點(diǎn)擊右下角的小麥克風(fēng)可直接語音輸入踪央。
這項(xiàng)技能一旦開啟，真的會(huì)停不下來瓢阴，我已經(jīng)讓六歲的兒子用語音輸入法記日記了~
簡單的markdown元素
無需專門練習(xí)畅蹂，只需要記住以下幾個(gè)符號就夠了。
1荣恐、標(biāo)題液斜，#。
常寫word文導(dǎo)航，對標(biāo)題一定不陌生旗唁，markdown使用#符號表示標(biāo)題畦浓。
代碼：
# 一級標(biāo)題
## 二級標(biāo)題效果：
一級標(biāo)題
二級標(biāo)題
我的文章里基本使用的都是二級標(biāo)題。
2检疫、加粗讶请，**文字**
移動(dòng)閱讀時(shí)代，大家都是整屏整屏的翻屎媳，將內(nèi)容加黑高亮顯示夺溢，可提高閱讀體驗(yàn)，方便用戶烛谊。
代碼：
移動(dòng)閱讀**關(guān)鍵點(diǎn)高亮顯示**很重要风响。效果：
移動(dòng)閱讀關(guān)鍵點(diǎn)高亮顯示很重要。
3丹禀、引用状勤，>
有時(shí)，我們會(huì)引用一些名言金句双泪，為了突出顯示持搜，可以采取引用的方式。
像這樣：
>這是最好的時(shí)代焙矛，也是最壞的時(shí)代葫盼。效果：
這是最好的時(shí)代，也是最壞的時(shí)代村斟。
4贫导、列表，-
請單和任務(wù)項(xiàng)最喜歡使用列表蟆盹。
代碼：
- 工具
- markdown語言
- 模仿樣式效果：
- 工具
- markdown語言
- 模仿樣式
5孩灯、分隔線，---
如何快速的畫一條線日缨？你只需要3個(gè)中橫線钱反。
代碼：
---
這是條線效果：
這是條線
排版樣式
采用本文介紹的方法，作者只需要專注寫文章就好匣距。
排版交給CSS樣式表面哥。
工具里介紹的markdown here可以使用預(yù)設(shè)的CSS樣式，一鍵對文章排版毅待。
具體做法是：
- 1尚卫、安裝chrome瀏覽器和markdown here插件。
- 2尸红、打開markdown here選項(xiàng)吱涉，修改“基本渲染CSS”刹泄。
- 3、在公眾號文章編輯頁面怎爵，貼入markdown格式文章特石，點(diǎn)擊chrome瀏覽器上的markdown here插件圖標(biāo)，完成排版鳖链。
三步完成公眾號排版姆蘸。
介紹幾個(gè)關(guān)鍵環(huán)節(jié)：
1、文章樣式CSS文件
這是整個(gè)排版樣式的核心芙委，所有樣式的調(diào)整均通過修改CSS代碼完成逞敷。
不會(huì)CSS不打緊，我也是從抄別人的開始的灌侣。
后臺回復(fù)：“樣式表”推捐，可以把我的先拿去用。
這里要感謝李笑來老師侧啼，我是從他那里抄的基礎(chǔ)版CSS樣式牛柒，然后再自己修改。
2慨菱、文章整體風(fēng)格
通過修改CSS文件中的具體參數(shù)焰络，修改文章風(fēng)格。
.markdown-here-wrapper {
font-size: 16px; 字體大小
line-height: 1.8em; 行間距
letter-spacing: 0.05em; 字間距
padding: 0 8px; 文章的頁邊距
color: #888888;!important; 整體文字顏色
}
這段代碼是全局設(shè)置符喝。一開始很難自己修改出符合自己審美的風(fēng)格。
我是通過抄好看的文章風(fēng)格開始的甜孤。
這里要感謝姜胡說的大胡子老師协饲，我的這個(gè)CSS樣式便是抄了他的文章風(fēng)格。
很有藝術(shù)范缴川。
傳送門在這：大胡子的排版神技
3茉稠、如何抄樣式
前兩個(gè)技法都提到了抄，這里就詳細(xì)介紹下如何打磨自己的CSS樣式表把夸。
核心思路就是而线，先模仿、再練習(xí)恋日，之為學(xué)習(xí)膀篮。
這里還是要用到我們的最佳拍檔chrome瀏覽器。
首先岂膳，找到一篇自己喜歡的公眾號文章誓竿，使用chrome瀏覽器打開。
我們將使用開發(fā)者工具把文章的樣式挖出來谈截，在更多工具打開它筷屡。
點(diǎn)擊左上角鼠標(biāo)形按鈕涧偷，然后選擇要查看樣式的區(qū)域。
我這里以查看文字顏色為例毙死。
點(diǎn)擊文字區(qū)域燎潮，可以看到使用的顏色為#888888。
看下面的紅色區(qū)域扼倘，就是這段文字的CSS樣式确封，將里面的參數(shù)抄到自己的樣式表即可。
4唉锌、簡單CSS樣式修改
對圖片自動(dòng)加圓角隅肥、叫陰影：
img {
text-align: center !important; 居中
border-radius: 9px; 圓角
box-shadow: #AAAAAA 0em 0em 1em 0px; 陰影
visibility: visible !important;
width: 677px !important; 固定寬度
height: auto !important; 高度自動(dòng)
}對粗體、斜體的字體顏色進(jìn)行調(diào)整：
strong, b{
color: #010101;
}
em, i {
color: #010101;
}對標(biāo)題樣式進(jìn)行調(diào)整：
h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px; 行間距
padding: 0 8px; 頁邊距
font-style: bold !important; 標(biāo)題加粗
color: #1e1c1c !important; 標(biāo)題顏色
text-align: left !important; 居左對齊
margin-top: 1.5em 5px !important; 段前距離
margin-bottom: 1.5em 3px !important; 段后距離
}一鍵排版
前面將的都是準(zhǔn)備工作袄简，花一兩個(gè)小時(shí)便可基本掌握腥放。
實(shí)際排版其實(shí)很簡單，也就3秒鐘绿语。
- 1秃症、使用chrome登錄公眾號。
- 2吕粹、將markdown格式編寫的文章粘貼到公眾號后臺种柑。
- 3、點(diǎn)擊瀏覽器上的markdown here圖標(biāo)匹耕，完成排版聚请。
最后，可以發(fā)送到手機(jī)預(yù)覽下效果稳其。
如果有一些細(xì)節(jié)想調(diào)整驶赏，又暫時(shí)不會(huì)改CSS代碼，沒有關(guān)系既鞠。
同時(shí)在chrome上安裝一個(gè)“壹伴助手”來用煤傍，可以對細(xì)節(jié)進(jìn)行微調(diào)。
甚至可以抄壹伴的樣式~
以上方法嘱蛋，如果熟練使用蚯姆，可節(jié)省大量排版時(shí)間，起步也很簡單洒敏，直接用我的就可以了龄恋！
后臺回復(fù)：“樣式表”，獲取我的CSS樣式表桐玻，以及本篇文章的markdown源代碼篙挽。
多少學(xué)點(diǎn)網(wǎng)頁知識，有用镊靴！ — 大胡子
上篇排版文：
10秒鐘搞定公眾號文章排版
D87~
