玩轉公衆號markdown排版

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了。