markdown排版利器，支援 "一鍵排版" 的樣式模闆選擇，支援css樣式自定義，支援80多種代碼高亮
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了。
![阿裡還有這套路[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)