Md2All 簡介

Markdown排版利器，支援 “一鍵排版” 的樣式模板選擇，支援”css樣式自定義”，支援80多種程式碼高亮。

能讓Markdown內容，無需作任何調整就能同時在微信公眾號、部落格園、掘金、知乎、csdn、51cto、wordpress、hexo等平臺正確顯示當前預覽的效果。並能生成相應的Html文件。

富文字編輯器雖然用起來方便，但只能定義部份樣式，而Md2All的自定義css，是能定義所有標準的css樣式，甚至直接支援HTML排版，功能非常強大呵。

本教程主要內容如下：

• Md2All整體體驗;
• 初識css;
• 你要知到的;
• 全域性樣式自定義;
• 引用塊樣式自定義;
• 段落樣式自定義；
• 粗體、斜體、刪除線樣式自定義；
• 分隔線樣式自定義；
• 行內程式碼樣式自定義；
• 程式碼塊樣式自定義；
• 標題樣式自定義
  標題酷酷的改進；
  標題首字突出的改進；
  標題上下邊框的改進
• 最後

Md2All整體體驗

我會先點左上角的 “編輯” 圖示後才開始寫作，這樣，寫作的內容會自動儲存在瀏覽器的快取中。大家會看到，就是常用的幾條markdown指令，經Md2All渲染後，整個效果就變得高大上了，你可以選擇自己喜歡的樣式模板，OK後，一鍵“複製”到公眾號中，整件事就完成了，整個過程非常簡單。

注：
“複製”指的是工具欄的那個“複製”圖示，已實現：全選+複製，不能用ctrl+c,也不能用右鍵的“複製”呵

所有的“儲存”，目前是儲存在本機的瀏覽器快取中，所以重新開機後，這些儲存的內容是不會丟失的，如果擔心不小心清了快取或其它的原因引起的丟失，建議自己備份一份。

關於圖片
大家會看到，我拿圖片連結的方法是先把圖片上傳到公眾號中，然後在公眾號的“素材管理”->”圖片“中點選開啟圖片後，再右鍵圖片，”複製圖片的連結地址”，貼上到markdown中的。你也可以把Md2All”複製”到公眾號後，再插入圖片。但這些方法相對來說是比較複雜的。

因本人也寫部落格，我通常的做法是先在部落格平臺（如CSDN，簡書)把markdown寫好，上傳好圖片（上傳圖片時，markdown會自動包含了圖片的連結），然後再把部落格平臺的整個markdown內容複製到Md2All排版，再一鍵 “複製” ，貼上，貼上……到各個平臺。

其實，對於大部分人來說，上面的視訊就已能完美解決公眾號用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了。

“原文連結”的內容會持續更新呵。

如有問題或建議，歡迎公眾號留言呵。
公眾號不定時會有祕技的呵:p