Md2All 簡(jiǎn)介

Markdown排版利器，支持 "一鍵排版" 的樣式模板選擇脸哀，支持"css樣式自定義"蹦浦，支持80多種代碼高亮。

能讓Markdown內(nèi)容撞蜂，無(wú)需作任何調(diào)整就能同時(shí)在微信公眾號(hào)盲镶、博客園、掘金蝌诡、知乎溉贿、csdn、51cto浦旱、wordpress宇色、hexo等平臺(tái)正確顯示當(dāng)前預(yù)覽的效果。并能生成相應(yīng)的Html文檔颁湖。

富文本編輯器雖然用起來(lái)方便宣蠕，但只能定義部份樣式，而Md2All的自定義css甥捺，是能定義所有標(biāo)準(zhǔn)的css樣式抢蚀，甚至直接支持HTML排版，功能非常強(qiáng)大呵涎永。

更詳細(xì)的信息思币，請(qǐng)看官網(wǎng)：http://md.aclickall.com

本教程主要內(nèi)容如下：

• Md2All整體體驗(yàn);
• 初識(shí)css;
• 你要知到的;
• 全局樣式自定義;
• 引用塊樣式自定義;
• 段落樣式自定義；
• 粗體羡微、斜體谷饿、刪除線樣式自定義；
• 分隔線樣式自定義妈倔；
• 行內(nèi)代碼樣式自定義博投；
• 代碼塊樣式自定義；
• 標(biāo)題樣式自定義
  標(biāo)題酷酷的改進(jìn)盯蝴；
  標(biāo)題首字突出的改進(jìn)毅哗；
  標(biāo)題上下邊框的改進(jìn)
• 最后

Md2All整體體驗(yàn)

image

我會(huì)先點(diǎn)左上角的 "編輯" 圖標(biāo)后才開(kāi)始寫(xiě)作听怕，這樣，寫(xiě)作的內(nèi)容會(huì)自動(dòng)保存在瀏覽器的緩存中虑绵。大家會(huì)看到尿瞭，就是常用的幾條markdown指令，經(jīng)Md2All渲染后翅睛，整個(gè)效果就變得高大上了声搁，你可以選擇自己喜歡的樣式模板，OK后捕发，一鍵“復(fù)制”到公眾號(hào)中疏旨，整件事就完成了，整個(gè)過(guò)程非常簡(jiǎn)單扎酷。

注：
“復(fù)制”指的是工具欄的那個(gè)“復(fù)制”圖標(biāo)檐涝，已實(shí)現(xiàn)：全選+復(fù)制，不能用ctrl+c,也不能用右鍵的“復(fù)制”呵;

所有的“保存”法挨，目前是保存在本機(jī)的瀏覽器緩存中谁榜，所以重新開(kāi)機(jī)后，這些保存的內(nèi)容是不會(huì)丟失的坷剧，如果擔(dān)心不小心清了緩存或其它的原因引起的丟失惰爬，建議自己備份一份。

關(guān)于圖片
大家會(huì)看到惫企，我拿圖片鏈接的方法是先把圖片上傳到公眾號(hào)中撕瞧，然后在公眾號(hào)的“素材管理”->"圖片“中點(diǎn)擊打開(kāi)圖片后，再右鍵圖片狞尔，"復(fù)制圖片的鏈接地址"丛版，粘貼到markdown中的。你也可以把Md2All"復(fù)制"到公眾號(hào)后偏序，再插入圖片荆责。但這些方法相對(duì)來(lái)說(shuō)是比較復(fù)雜的承冰。

因本人也寫(xiě)博客，我通常的做法是先在博客平臺(tái)（如CSDN，簡(jiǎn)書(shū))把markdown寫(xiě)好缩举，上傳好圖片（上傳圖片時(shí)吐辙，markdown會(huì)自動(dòng)包含了圖片的鏈接）液肌，然后再把博客平臺(tái)的整個(gè)markdown內(nèi)容復(fù)制到Md2All排版承疲，再一鍵 “復(fù)制” ，粘貼冲呢，粘貼......到各個(gè)平臺(tái)舍败。

其實(shí)，對(duì)于大部分人來(lái)說(shuō)，上面的視頻就已能完美解決公眾號(hào)用markdown來(lái)寫(xiě)作的問(wèn)題了邻薯。但對(duì)我來(lái)說(shuō)裙戏，這只是介紹Md2All的開(kāi)始。自定義css樣式功能如此強(qiáng)大厕诡，你能不往下看嗎累榜？

初識(shí)css

對(duì)于沒(méi)學(xué)習(xí)過(guò)css的同學(xué)來(lái)說(shuō)，一聽(tīng)到css就懵了灵嫌，啥來(lái)的信柿？
簡(jiǎn)單地說(shuō)，css就是渲染網(wǎng)頁(yè)所用的樣式醒第。打開(kāi)“一鍵排版”，看到里面的的內(nèi)容就是當(dāng)前渲染效果對(duì)應(yīng)的css樣式进鸠，不同的樣式模板對(duì)應(yīng)不同的css樣式稠曼，所以就能渲染出不一樣的效果。

可能又有些同學(xué)看到css樣式文件里那么多的內(nèi)容客年，又懵了霞幅，不知從何下手。
其實(shí)量瓜，在樣式文件中司恳，我已加了很多的注釋，比如p {/*段落*/,另外绍傲，看到的h1,h2,......扔傅，h6為標(biāo)題，分別對(duì)應(yīng)markdown內(nèi)容中的#,##,......烫饼，######猎塞。

舉個(gè)例子來(lái)說(shuō)，如果我想改###這個(gè)h3標(biāo)題的效果杠纵，那就只要改樣式文件中以h3為開(kāi)頭的樣式的內(nèi)容即可荠耽。如：

h3 {
  font-size: 1.3em;
}

改為

h3 {
  font-size: 2.3em;
  color:#159957
}

也可以直接在后面添加，后面的會(huì)覆蓋前面的比藻，如:

h3 {
  font-size: 1.3em;
}
h3 {
  font-size: 2.3em;
  color:#159957
}

從上面的內(nèi)容可以看到铝量，font-size,color,這個(gè)不用解釋大家都知到是什么意思了吧，而顏色大家會(huì)發(fā)現(xiàn)有時(shí)用的是如：color:rgb(248,35,117) 银亲，而有時(shí)又用如color:#f82375慢叨，其實(shí)只不過(guò)是兩種不同的表達(dá)罷了，其中rgb(248,35,117)分表為r群凶、g插爹、b對(duì)應(yīng)的10進(jìn)制數(shù)，和其16進(jìn)制數(shù)：color:#f82375是對(duì)應(yīng)的。
因?yàn)镸d2All中用的都是標(biāo)準(zhǔn)的css樣式赠尾，如果有不清楚的力穗，百度一下就ok了。

你要知到的

修改樣式后气嫁，“保存”就能即時(shí)預(yù)覽到效果当窗。

大家后面會(huì)看到，我的第一步是從"默認(rèn)樣式“中把整個(gè)樣式內(nèi)容復(fù)制到"最愛(ài)樣式“中然后進(jìn)行修改的寸宵，建議參考這個(gè)做法崖面，因?yàn)樗械臉邮侥０宥际菑?默認(rèn)樣式“中修修改改過(guò)來(lái)的，另外梯影，其它的樣式模板目前還有可能在不斷改進(jìn)中巫员，所以在"最愛(ài)樣式“中定義自己的樣式是最好的。

另外甲棍，各個(gè)樣式模板相對(duì)"默認(rèn)樣式“改動(dòng)的部分简识，我都用 紅色 標(biāo)出來(lái)，所以應(yīng)該很容易就能看到改了那個(gè)地方感猛，如果你喜歡某模板的標(biāo)題樣式七扰，然后又喜歡另一模板的引用塊樣式，可以把相應(yīng)的樣式復(fù)制并整合到你“最愛(ài)樣式”下陪白，如有需要再加以修改就行了颈走。

好了，下面我就帶著大家一步一步來(lái)介紹如何自定義css樣式了咱士。

全局樣式自定義

這里寫(xiě)圖片描述

但細(xì)心的朋友可能會(huì)發(fā)現(xiàn)枣耀，不是說(shuō)了全局的嗎？但為什么最上面的引用塊的樣式?jīng)]有變的庭再？呵呵捞奕，再補(bǔ)充下：
更具體定義的元素，無(wú)論放在前面還是后面拄轻，也不會(huì)被范圍更大的定義覆蓋颅围，如：

blockquote
{
color:#ffffff;
}
output_wrapper
{
color:#00000;
}

output_wrapper的color不會(huì)覆蓋blockquote（引用塊）的。原因是就就是output_wrapper是針對(duì)所有的恨搓，而blockquote只是針對(duì)引用塊院促。
好吧筏养，既然說(shuō)了引用塊blockquote，那就接著blockquote{}來(lái)說(shuō)吧常拓！

引用塊樣式自定義

這里寫(xiě)圖片描述

段落樣式自定義

段落

粗體茎辐、斜體、刪除線

粗體

分隔線樣式自定義

分隔線

想不到分隔線也能做成這樣的效果店枣，對(duì)吧孔飒？

行內(nèi)代碼樣式自定義

行內(nèi)代碼和代碼塊一般情況都是用于代碼顯示，不過(guò)行內(nèi)代碼是可以和其它的內(nèi)容放在同一行的艰争，所以有些同學(xué)也喜歡用行內(nèi)代碼來(lái)顯示一些自己要突出的內(nèi)容；而代碼塊桂对，就是獨(dú)立為顯示一段代碼的區(qū)域甩卓。

這里寫(xiě)圖片描述

代碼塊樣式自定義

代碼塊

標(biāo)題樣式自定義

其實(shí)很多文章弱匪，大家都比較注意標(biāo)題的樣式，所以下面會(huì)發(fā)別從三個(gè)標(biāo)題樣式為例來(lái)進(jìn)行練習(xí)萧诫。

補(bǔ)充一下枝嘶，markdown語(yǔ)法的#對(duì)應(yīng)樣式中的h1,##對(duì)應(yīng)h2,......######對(duì)應(yīng)h6群扶，雖然對(duì)h1到h6瀏覽器會(huì)有默認(rèn)的font-size镀裤，但也是可以任意自定義的暑劝。

大家看到我比較喜歡用h3茴扁，主要是因?yàn)榱宀恚覍?xiě)markdown時(shí)喜歡用通用的語(yǔ)法，也就是說(shuō)峭火，就算有些平臺(tái)如：簡(jiǎn)書(shū)毁习，不支持Md2All的渲染，但我可以把Markdown的內(nèi)容復(fù)制到簡(jiǎn)書(shū)卖丸，用簡(jiǎn)書(shū)自帶的markdown編輯器還是能渲染出它默認(rèn)的效果的纺且，而我喜歡h3作標(biāo)題，就是因?yàn)?code>h3默認(rèn)的font-size對(duì)我來(lái)說(shuō)稍浆，剛好载碌。

而Md2All對(duì)標(biāo)題(h1......h6)進(jìn)行了優(yōu)化，以h3為例衅枫，我把h3{}作為整個(gè)標(biāo)題的樣式嫁艇，而把h3 span{}作為文字內(nèi)容的樣式，說(shuō)得有點(diǎn)聽(tīng)不懂弦撩，對(duì)嗎步咪？不用擔(dān)心，通過(guò)下面的練習(xí)益楼，你就知到了猾漫。

標(biāo)題酷酷的改進(jìn)

我看到大多數(shù)朋友喜歡用"標(biāo)題酷酷“這個(gè)樣式，其實(shí)這個(gè)樣式是我自己瞎弄出來(lái)的感凤，想不到有那么多同學(xué)喜歡悯周，有點(diǎn)偷著樂(lè):p，但后來(lái)想想捐康，是不是樣式太少，他們根本沒(méi)得選花枫？

那好吧,自己來(lái)改一個(gè)吧刻盐。當(dāng)然，我說(shuō)的只是方法乙墙，大家知到方法后听想，怎樣改就是自己個(gè)人喜歡的事了。好蛙粘，直接來(lái)視頻：

標(biāo)題 cool

標(biāo)題首字突出的改進(jìn)

標(biāo)題首字突出

標(biāo)題上下邊框的改進(jìn)

標(biāo)題上下邊框

最后

看到這兒鲁森，大家都知到怎樣玩轉(zhuǎn)Md2All的自定義了吧?是不是真的很簡(jiǎn)單呀 :p
對(duì)于剛開(kāi)始接觸自定義css樣式的同學(xué)，可能還是不太敢去改痛垛，“萬(wàn)一改錯(cuò)了呢？”仔雷，其實(shí)你一萬(wàn)個(gè)放心电抚，就算改錯(cuò)也就是”恢復(fù)預(yù)設(shè)“值蝙叛，再保存就ok了锻煌。