Md2All 簡介
Markdown排版利器，支持 "一鍵排版" 的樣式模板選擇，支持"css樣式自定義"，支持80多種代碼高亮。
能讓Markdown內容，無需作任何調整就能同時在微信公眾號、博客園、掘金、知乎、csdn、51cto、wordpress、hexo等平台正確顯示當前預覽的效果。並能生成相應的Html文檔。
富文本編輯器雖然用起來方便，但只能定義部份樣式，而Md2All的自定義css，是能定義所有標准的css樣式，甚至直接支持HTML排版，功能非常強大呵。
更詳細的信息，請看官網：http://md.aclickall.com
本教程主要內容如下：
Md2All整體體驗圖片和雲圖床關於圖片關於雲圖床初識css你要知到的全局樣式自定義引用塊樣式自定義段落樣式自定義粗體、斜體、刪除線分隔線樣式自定義行內代碼樣式自定義代碼塊樣式自定義標題樣式自定義標題酷酷的改進標題首字突出的改進標題上下邊框的改進最后
Md2All整體體驗
我會先點左上角的 "編輯" 圖標后才開始寫作，這樣，寫作的內容會自動保存在瀏覽器的緩存中。大家會看到，就是常用的幾條markdown指令，經Md2All渲染后，整個效果就變得高大上了，你可以選擇自己喜歡的樣式模板，OK后，一鍵“復制”到公眾號中，整件事就完成了，整個過程非常簡單。
注：
“復制”指的是工具欄的那個“復制”圖標，已實現：全選+復制，不能用ctrl+c,也不能用右鍵的“復制”呵;
所有的“保存”，目前是保存在本機的瀏覽器緩存中，所以重新開機后，這些保存的內容是不會丟失的，如果擔心不小心清了緩存或其它的原因引起的丟失，建議自己備份一份。
圖片和雲圖床
關於圖片
大家會看到，我拿圖片鏈接的方法是先把圖片上傳到公眾號中，然后在公眾號的“素材管理”->"圖片“中點擊打開圖片后，再右鍵圖片，"復制圖片的鏈接地址"，粘貼到markdown中的。你也可以把Md2All"復制"到公眾號后，再插入圖片。但這些方法相對來說是比較復雜的。
因本人也寫博客，我通常的做法是先在博客平台（如CSDN，簡書)把markdown寫好，上傳好圖片（上傳圖片時，markdown會自動包含了圖片的鏈接），然后再把博客平台的整個markdown內容復制到Md2All排版，再一鍵 “復制” ，粘貼，粘貼……到各個平台。
關於雲圖床
最新版本已支持雲圖床，設置好雲圖床后，能把本地圖片自動上傳到雲圖床，並自動生成markdown.
請參考雲圖床教程:https://www.cnblogs.com/garyyan/p/9181809.html
其實，對於大部分人來說，上面的視頻就已能完美解決公眾號用markdown來寫作的問題了。但對我來說，這只是介紹Md2All的開始。自定義css樣式功能如此強大，你能不往下看嗎？
初識css
對於沒學習過css的同學來說，一聽到css就懵了，啥來的？
簡單地說，css就是渲染網頁所用的樣式。打開“一鍵排版”，看到里面的的內容就是當前渲染效果對應的css樣式，不同的樣式模板對應不同的css樣式，所以就能渲染出不一樣的效果。
可能又有些同學看到css樣式文件里那么多的內容，又懵了，不知從何下手。
其實，在樣式文件中，我已加了很多的注釋，比如p {/*段落*/,另外，看到的h1,h2,......，h6為標題，分別對應markdown內容中的#,##,......，######。
舉個例子來說，如果我想改###這個h3標題的效果，那就只要改樣式文件中以h3為開頭的樣式的內容即可。如：
h3 {
font-size: 1.3em;
}
改為
h3 {
font-size: 2.3em;
color:#159957
}
也可以直接在后面添加，后面的會覆蓋前面的，如:
h3 {
font-size: 1.3em;
}
h3 {
font-size: 2.3em;
color:#159957
}
從上面的內容可以看到，font-size,color,這個不用解釋大家都知到是什么意思了吧，而顏色大家會發現有時用的是如：color:rgb(248,35,117) ，而有時又用如color:#f82375，其實只不過是兩種不同的表達罷了，其中rgb(248,35,117)分表為r、g、b對應的10進制數，和其16進制數：color:#f82375是對應的。
因為Md2All中用的都是標准的css樣式，如果有不清楚的，百度一下就ok了。
你要知到的
修改樣式后，“保存”就能即時預覽到效果。
大家后面會看到，我的第一步是從"默認樣式“中把整個樣式內容復制到"最愛樣式“中然后進行修改的，建議參考這個做法，因為所有的樣式模板都是從"默認樣式“中修修改改過來的，另外，其它的樣式模板目前還有可能在不斷改進中，所以在"最愛樣式“中定義自己的樣式是最好的。
另外，各個樣式模板相對"默認樣式“改動的部分，我都用 紅色 標出來，所以應該很容易就能看到改了那個地方，如果你喜歡某模板的標題樣式，然后又喜歡另一模板的引用塊樣式，可以把相應的樣式復制並整合到你“最愛樣式”下，如有需要再加以修改就行了。
好了，下面我就帶着大家一步一步來介紹如何自定義css樣式了。
全局樣式自定義
大家看到，修改
output_wrapper{}下的樣式后，就直接影響了整個文檔的顯示效果，而每個樣式的修改會有什么效果，從英文單詞和視頻效果中已能很清楚地看到，所以不一一詳細描述了。
但細心的朋友可能會發現，不是說了全局的嗎？但為什么最上面的引用塊的樣式沒有變的？呵呵，再補充下：
更具體定義的元素，無論放在前面還是后面，也不會被范圍更大的定義覆蓋，如：
blockquote
{
color:#ffffff;
}
output_wrapper
{
color:#00000;
}
output_wrapper的color不會覆蓋blockquote（引用塊）的。原因是就就是output_wrapper是針對所有的，而blockquote只是針對引用塊。
好吧，既然說了引用塊blockquote，那就接着blockquote{}來說吧！
引用塊樣式自定義
有了上面的介紹后，這兒看起來應該沒壓力了吧，就是改
blockquote{},說白了就是英語單詞的事了。
段落樣式自定義
粗體、斜體、刪除線
大家看到，對於斜體
em{}，我把
font-style:itaic拿掉就不斜，對於刪除線
del{},只要添加
text-decoration:none;就會把刪除線可掉，對於強調
strong{}可以添加
font-weight:normal;把粗體去掉。這樣你就可以把它作為其它的作用了呵。
分隔線樣式自定義
想不到分隔線也能做成這樣的效果，對吧？
行內代碼樣式自定義
行內代碼和代碼塊一般情況都是用於代碼顯示，不過行內代碼是可以和其它的內容放在同一行的，所以有些同學也喜歡用行內代碼來顯示一些自己要突出的內容；而代碼塊，就是獨立為顯示一段代碼的區域。
行內代碼，也就是改
code{}。
代碼塊樣式自定義
看到這兒后，就算工具欄沒了 代碼緊湊的功能，你也應該知到怎樣實現了吧！
另外，代碼的高亮，你也可以隨心所欲地定義了吧。
標題樣式自定義
其實很多文章，大家都比較注意標題的樣式，所以下面會發別從三個標題樣式為例來進行練習。
補充一下，markdown語法的#對應樣式中的h1,##對應h2,……######對應h6，雖然對h1到h6瀏覽器會有默認的font-size，但也是可以任意自定義的。
大家看到我比較喜歡用h3，主要是因為，我寫markdown時喜歡用通用的語法，也就是說，就算有些平台如：簡書，不支持Md2All的渲染，但我可以把Markdown的內容復制到簡書，用簡書自帶的markdown編輯器還是能渲染出它默認的效果的，而我喜歡h3作標題，就是因為h3默認的font-size對我來說，剛好。
而Md2All對標題(h1……h6)進行了優化，以h3為例，我把h3{}作為整個標題的樣式，而把h3 span{}作為文字內容的樣式，說得有點聽不懂，對嗎？不用擔心，通過下面的練習，你就知到了。
標題酷酷的改進
我看到大多數朋友喜歡用"標題酷酷“這個樣式，其實這個樣式是我自己瞎弄出來的，想不到有那么多同學喜歡，有點偷着樂:p，但后來想想，是不是樣式太少，他們根本沒得選？
那好吧,自己來改一個吧。當然，我說的只是方法，大家知到方法后，怎樣改就是自己個人喜歡的事了。好，直接來視頻：
標題首字突出的改進
大家看到，這個標題我用的不是
h3,而是
h1了，主要是想告訴大家，如果你一篇文章中，如果想同時有幾種標題，可以用這種方法。當然這種方法也不是唯一的，但先到此為止了。
標題上下邊框的改進
大家看到，這個我又變成用
h1了，對吧。這些都是很靈活的。
最后
看到這兒，大家都知到怎樣玩轉Md2All的自定義了吧?是不是真的很簡單呀 :p
對於剛開始接觸自定義css樣式的同學，可能還是不太敢去改，“萬一改錯了呢？”，其實你一萬個放心，就算改錯也就是”恢復預設“值，再保存就ok了。