摘要
Typora是一款Markdown編輯器篡九，Windows、Mac醋奠、Linux三大主流系統(tǒng)的都有榛臼。Typora樣式簡潔、美觀窜司，還支持導(dǎo)出HTML沛善，支持樣式定制，如果會點web前端小技巧的話塞祈，還能讓你的個人博客長得跟Typora一模一樣金刁，而且還大大節(jié)省了你寫博客文章的時間。使用了Typora议薪，會讓你瞬間放棄富文本尤蛮，還要什么富文本？
Typora是啥斯议？
Typora是一款歪果仁寫的Markdown編輯器（軟件）产捞，至于Markdown是什么，如果你不了解哼御，就去找一下度娘或者google吧~
我是怎么認識Typora的呢坯临？
自從簡單了解了一下Markdown之后，嗯……感覺就是程序員要什么office恋昼，要什么doc看靠，在Markdown面前，它們就是小弟液肌。于是挟炬，我去知乎簡單搜了一下Markdown軟件推薦，無意間看到Typora，使用了一下辟宗，嗯爵赵，真香！２雌辍空幻！
為什么說Typora真香？其實只有一個原因容客，就是Typora編輯文本秕铛、閱讀本文都特別舒服，美觀簡潔缩挑。就沖著Typora的外觀優(yōu)勢但两，我對其他的Markdown編輯器不再有任何感覺。
只是供置，之前我還不了解Typora的強大谨湘，直到現(xiàn)在，我簡單琢磨了一下后芥丧，才發(fā)現(xiàn)紧阔，原來Typora還可以用來寫博客，可以讓你的網(wǎng)頁博客文章看起來跟在Typora里的樣式一模一樣续担，完美得不行擅耽。
這是一個什么操作呢？
Typora強大的HTML支持
沒錯物遇，Typora支持HTML乖仇，而且支持得非常完美。
Typora最讓我喜歡的兩個功能：
Typora可以把文本加樣式導(dǎo)出HTML询兴，導(dǎo)出后你會驚奇地發(fā)現(xiàn)乃沙，你想要的網(wǎng)頁博客文章已經(jīng)出來了，因為這個HTML文件你可以直接在服務(wù)器給外界訪問了诗舰，簡單粗暴又不失美觀崔涂。
Typora支持定制樣式或主題。正因為這樣始衅，在使用Typora時冷蚂，你會發(fā)現(xiàn)有好幾款默認提供的主題可以選擇，每一款主題的樣式都不一樣汛闸，同時你還可以去Typora的主題商店查看更多的主題并下載使用蝙茶，操作方式都非常簡單。
如果你會HTML诸老、CSS隆夯，那就更完美了！你完全可以遵循Typora官方定義（固定）好的樣式id、class名字蹄衷，自定義你想要的style忧额。只有你寫不出，沒有Typora做不到的樣式效果愧口，Typora很完美的告訴了我們：Markdown睦番，沒有實現(xiàn)不出的樣式！
同時耍属，Typora還支持導(dǎo)出word文檔托嚣、pdf、圖片等多種格式的文件厚骗，滿足你各方面的需求示启，不過你要是寫論文就還是乖乖用office吧，學校與期刊的硬性要求领舰。
Typora與網(wǎng)頁博客的完美配合
正如上文所說夫嗓，Typora支持直接導(dǎo)出HTML，這個html文件就可以直接作為博客文章展示了冲秽。
只是這樣有一個問題啤月，Typora導(dǎo)出的html是帶css樣式的，即整個html文件冗余了Typora給你的文章賦予的所有css代碼劳跃，還挺多，并且浙垫，你每一篇文章都是一個新的html文件刨仑，每一個html文件都有相同的css代碼，對于你的博客項目本身夹姥，這些重復(fù)可能就不是很有必要了杉武。如果你發(fā)表了100篇文章，那么就有100個html文件辙售，這樣子應(yīng)該不太妥（盡管瀏覽器訪問時直接加載html靜態(tài)頁面會稍微快一點）轻抱，你應(yīng)該不想這樣管理你的博客文章。
其實我們可以另辟蹊徑旦部，只要你有一點web前端基礎(chǔ)祈搜，完成這些操作簡單的不行。
選擇并定制好你想要的主題樣式
首先士八，在Typora確定好你想要的主題容燕，比如官方提供的GitHub主題，或者是去主題商店找其他的主題婚度。我這個主題就是主題商店里的orangeheart蘸秘，不過作者似乎還在完善中，比如截止現(xiàn)在，orangeheart里的一級標題和二級標題都還不是我現(xiàn)在這篇文章這樣醋虏，這個我是我自己自己修改定制的寻咒。
這里描述下簡單操作：
Typora左上角文件 -> 偏好設(shè)置 -> 外觀 -> 打開主題文件夾
然后將你下載好的主題文件（如果是zip直接解壓到當前文件夾下）放到你打開的這個主題文件夾下，然后主題Typora颈嚼，再左上角主題毛秘，就可以看到你下載好的主題并可以使用了，是不是很簡單粘舟？（當然你也完全可以從零開始寫一個你自己的主題）
那么接下來我們要怎么在已有主題的基礎(chǔ)上定制自己想要的樣式呢熔脂？
Typora有自己的一套加載css樣式規(guī)則，引用官方說明如下：
Append Custom CSS to all themes or other themes
Typora will load CSS files in following order:
- Typora’s basic styles
- CSS for current theme
base.user.cssunder theme folder{current-theme}.user.cssunder theme folder.You can create
base.user.cssand{current-theme}.user.cssunder the theme folder if they do not exist.
上述英文應(yīng)該很容易看懂吧（不然你就是一個假的程序員）柑肴。
簡單說就是霞揉，Typora是按照一定的順序去加載css樣式文件的，對于重名的樣式id晰骑、class名字适秩，后面加載的樣式文件會覆蓋前面先加載的。
第一個是Typora最基本的樣式硕舆，我們無法直接修改秽荞；
第二個是我們的主題樣式文件，可直接修改抚官，但是直接改這個文件有些樣式是改不了的扬跋，比如代碼塊的樣式，改這個文件就不行凌节，因為代碼塊的樣式Typora在第三個base.user.css處理了钦听，在這個文件修改會被base.user.css覆蓋；
第三個是base.user.css倍奢，這個文件是作用于所有主題的朴上，其實就是相當于第一個文件的可定制版；
第四個是某個主題的的樣式覆蓋文件卒煞，命名規(guī)則是：xxx.user.css痪宰，如主題orangeheart.css，命名就是orangeheart.user.css畔裕。官方推薦的是如果你是使用別人的主題衣撬，想要修改的話，最好在這個文件修改扮饶，因為這個文件是最后加載的淮韭，最終顯示的樣式也才會以你定制的為準。
說了這么多贴届，那我們該怎么修改樣式呢靠粪？
修改樣式蜡吧，就要知道Typora定義好的樣式命名規(guī)則，我們有是那種方式去得知Typora定義好的id占键、class名字：
- 官方文檔>>
- 自行導(dǎo)出HTML文件后昔善，直接從HTML文件里使用到的id、class名字畔乙，不過這種方式很難找出那個class對應(yīng)那個樣式顯示君仆，不推薦這種方式；
- 直接在Typora上牲距，按shift+F12返咱，你會發(fā)現(xiàn)，跟Chrome瀏覽器似乎一模一樣的調(diào)式工具頁面出來了牍鞠。太贊了咖摹，有了這個，你還不懂怎么去修改樣式难述？
導(dǎo)出HTML并抽離出css代碼
好萤晴，到這一步，就證明你已經(jīng)用Typora編輯好你的文章了胁后，并且是你想要的那種樣式店读。然后選擇導(dǎo)出HTML，然后隨便用一個IDE（普通文本編輯器也行攀芯，我這里使用webstorm）打開它屯断，把里面的css代碼剪切出來，拷貝到一個新建的css文件侣诺，如命名為typora.orangeheart.css殖演。
現(xiàn)假設(shè)你的博客文章頁是article.html，通過后端請求紧武，可以顯示不同的文章。
首先敏储，你的article.html要link引入一下typora.orangeheart.css
<link rel='stylesheet' type='text/css' href="css/typora.orangeheart.css"/>
假設(shè)你的文章內(nèi)容是顯示在這樣一個div內(nèi)：
<div class="article-content">
</div>
你從后端請求得到的文章內(nèi)容阻星，應(yīng)該是通過這種方式放到這個div下：
// 這里是jquery js代碼
let articleContent = 后端返回內(nèi)容;
$('.article-content').html(articleContent);
那么，這個后端返回的內(nèi)容就是你用Typora導(dǎo)出的那個HTML文件里已添，body標簽下的所有內(nèi)容（不含body標簽本身）妥箕，然后把這段內(nèi)容直接放到你的博客文章數(shù)據(jù)庫里的文章內(nèi)容字段即可，或者像我更舞，有后臺管理系統(tǒng)的話畦幢，直接像這樣操作，也是可以的：
然后缆蝉，嗯……然后就可以了宇葱，你試一下訪問一下瘦真，就會驚奇地發(fā)現(xiàn)，你現(xiàn)在的博客文章樣式就真的是跟Typora里的一樣的黍瞧。如果你的瀏覽器顯示的效果與Typora顯示的效果有些許差別诸尽，多半是字體大小的區(qū)別，因為Typora導(dǎo)出的css樣式里的字體是使用rem單位的印颤，1rem等于多少px您机，瀏覽器跟Typora設(shè)置可能不一樣，這時候你就需要在你的博客項目那邊的typora.orangeheart.css針對瀏覽器的顯示效果做一些字體的大小修改年局，不過這也很簡單际看，而且改一次就行了，以后不用再改矢否，因為Typora對于同一個主題導(dǎo)出的html的css樣式代碼都是一樣的仲闽，不費事，相信你自己能搞定~
以后兴喂，只要在Typora寫好文章蔼囊，就相當于你的博客文章也寫好了，不僅僅如此衣迷，有了這一份Typora寫好的Markdown文章畏鼓，你的CSDN、知乎壶谒、簡書云矫、微信公眾號等（如果有的話），也全都可以直接使用這個Markdown文件汗菜，各個平臺已經(jīng)做了Markdown文件解析了让禀，只不過各個平臺的樣式顯示就不是你能控制住的了，但是寫好的Markdown排版還是在的陨界。這……難道不香嗎巡揍？
簡直就是，一份Markdown菌瘪，個人博客腮敌、CSDN、知乎俏扩、簡書糜工、公眾號全搞定，太爽了录淡，省下了很多時間捌木，方便得不行！＜灯荨刨裆！
及時總結(jié)與記錄，避免重蹈覆轍崔拥；亦分享于你极舔，期待共同成長~
THE END
