摘要
Typora是一款Markdown编辑器，Windows、Mac、Linux三大主流系统的都有。Typora样式简洁、美观，还支持导出HTML，支持样式定制，如果会点web前端小技巧的话，还能让你的个人博客长得跟Typora一模一样，而且还大大节省了你写博客文章的时间。使用了Typora，会让你瞬间放弃富文本，还要什么富文本？
Typora是啥？
Typora是一款歪果仁写的Markdown编辑器（软件），至于Markdown是什么，如果你不了解，就去找一下度娘或者google吧~
我是怎么认识Typora的呢？
自从简单了解了一下Markdown之后，嗯……感觉就是程序员要什么office，要什么doc，在Markdown面前，它们就是小弟。于是，我去知乎简单搜了一下Markdown软件推荐，无意间看到Typora，使用了一下，嗯，真香！！！
为什么说Typora真香？其实只有一个原因，就是Typora编辑文本、阅读本文都特别舒服，美观简洁。就冲着Typora的外观优势，我对其他的Markdown编辑器不再有任何感觉。
只是，之前我还不了解Typora的强大，直到现在，我简单琢磨了一下后，才发现，原来Typora还可以用来写博客，可以让你的网页博客文章看起来跟在Typora里的样式一模一样，完美得不行。
这是一个什么操作呢？
Typora强大的HTML支持
没错，Typora支持HTML，而且支持得非常完美。
Typora最让我喜欢的两个功能：
Typora可以把文本加样式导出HTML，导出后你会惊奇地发现，你想要的网页博客文章已经出来了，因为这个HTML文件你可以直接在服务器给外界访问了，简单粗暴又不失美观。
Typora支持定制样式或主题。正因为这样，在使用Typora时，你会发现有好几款默认提供的主题可以选择，每一款主题的样式都不一样，同时你还可以去Typora的主题商店查看更多的主题并下载使用，操作方式都非常简单。
如果你会HTML、CSS，那就更完美了！你完全可以遵循Typora官方定义（固定）好的样式id、class名字，自定义你想要的style。只有你写不出，没有Typora做不到的样式效果，Typora很完美的告诉了我们：Markdown，没有实现不出的样式！
同时，Typora还支持导出word文档、pdf、图片等多种格式的文件，满足你各方面的需求，不过你要是写论文就还是乖乖用office吧，学校与期刊的硬性要求。
Typora与网页博客的完美配合
正如上文所说，Typora支持直接导出HTML，这个html文件就可以直接作为博客文章展示了。
只是这样有一个问题，Typora导出的html是带css样式的，即整个html文件冗余了Typora给你的文章赋予的所有css代码，还挺多，并且，你每一篇文章都是一个新的html文件，每一个html文件都有相同的css代码，对于你的博客项目本身，这些重复可能就不是很有必要了。如果你发表了100篇文章，那么就有100个html文件，这样子应该不太妥（尽管浏览器访问时直接加载html静态页面会稍微快一点），你应该不想这样管理你的博客文章。
其实我们可以另辟蹊径，只要你有一点web前端基础，完成这些操作简单的不行。
选择并定制好你想要的主题样式
首先，在Typora确定好你想要的主题，比如官方提供的GitHub主题，或者是去主题商店找其他的主题。我这个主题就是主题商店里的orangeheart，不过作者似乎还在完善中，比如截止现在，orangeheart里的一级标题和二级标题都还不是我现在这篇文章这样，这个我是我自己自己修改定制的。
这里描述下简单操作：
Typora左上角文件 -> 偏好设置 -> 外观 -> 打开主题文件夹
然后将你下载好的主题文件（如果是zip直接解压到当前文件夹下）放到你打开的这个主题文件夹下，然后主题Typora，再左上角主题，就可以看到你下载好的主题并可以使用了，是不是很简单？（当然你也完全可以从零开始写一个你自己的主题）
那么接下来我们要怎么在已有主题的基础上定制自己想要的样式呢？
Typora有自己的一套加载css样式规则，引用官方说明如下：
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.
上述英文应该很容易看懂吧（不然你就是一个假的程序员）。
简单说就是，Typora是按照一定的顺序去加载css样式文件的，对于重名的样式id、class名字，后面加载的样式文件会覆盖前面先加载的。
第一个是Typora最基本的样式，我们无法直接修改；
第二个是我们的主题样式文件，可直接修改，但是直接改这个文件有些样式是改不了的，比如代码块的样式，改这个文件就不行，因为代码块的样式Typora在第三个base.user.css处理了，在这个文件修改会被base.user.css覆盖；
第三个是base.user.css，这个文件是作用于所有主题的，其实就是相当于第一个文件的可定制版；
第四个是某个主题的的样式覆盖文件，命名规则是：xxx.user.css，如主题orangeheart.css，命名就是orangeheart.user.css。官方推荐的是如果你是使用别人的主题，想要修改的话，最好在这个文件修改，因为这个文件是最后加载的，最终显示的样式也才会以你定制的为准。
这里附上官方说明链接>>
说了这么多，那我们该怎么修改样式呢？
修改样式，就要知道Typora定义好的样式命名规则，我们有是那种方式去得知Typora定义好的id、class名字：
- 官方文档>>
- 自行导出HTML文件后，直接从HTML文件里使用到的id、class名字，不过这种方式很难找出那个class对应那个样式显示，不推荐这种方式；
- 直接在Typora上，按shift+F12，你会发现，跟Chrome浏览器似乎一模一样的调式工具页面出来了。太赞了，有了这个，你还不懂怎么去修改样式？
导出HTML并抽离出css代码
好，到这一步，就证明你已经用Typora编辑好你的文章了，并且是你想要的那种样式。然后选择导出HTML，然后随便用一个IDE（普通文本编辑器也行，我这里使用webstorm）打开它，把里面的css代码剪切出来，拷贝到一个新建的css文件，如命名为typora.orangeheart.css。
现假设你的博客文章页是article.html，通过后端请求，可以显示不同的文章。
首先，你的article.html要link引入一下typora.orangeheart.css
假设你的文章内容是显示在这样一个div内：
你从后端请求得到的文章内容，应该是通过这种方式放到这个div下：
// 这里是jquery js代码
let articleContent = 后端返回内容;
$('.article-content').html(articleContent);
那么，这个后端返回的内容就是你用Typora导出的那个HTML文件里，body标签下的所有内容（不含body标签本身），然后把这段内容直接放到你的博客文章数据库里的文章内容字段即可，或者像我，有后台管理系统的话，直接像这样操作，也是可以的：
然后，嗯……然后就可以了，你试一下访问一下，就会惊奇地发现，你现在的博客文章样式就真的是跟Typora里的一样的。如果你的浏览器显示的效果与Typora显示的效果有些许差别，多半是字体大小的区别，因为Typora导出的css样式里的字体是使用rem单位的，1rem等于多少px，浏览器跟Typora设置可能不一样，这时候你就需要在你的博客项目那边的typora.orangeheart.css针对浏览器的显示效果做一些字体的大小修改，不过这也很简单，而且改一次就行了，以后不用再改，因为Typora对于同一个主题导出的html的css样式代码都是一样的，不费事，相信你自己能搞定~
以后，只要在Typora写好文章，就相当于你的博客文章也写好了，不仅仅如此，有了这一份Typora写好的Markdown文章，你的CSDN、知乎、、微信公众号等（如果有的话），也全都可以直接使用这个Markdown文件，各个平台已经做了Markdown文件解析了，只不过各个平台的样式显示就不是你能控制住的了，但是写好的Markdown排版还是在的。这……难道不香吗？
简直就是，一份Markdown，个人博客、CSDN、知乎、、公众号全搞定，太爽了，省下了很多时间，方便得不行！！！
附上：博主该文的博客连接，看看效果~
及时总结与记录，避免重蹈覆辙；亦分享于你，期待共同成长~
THE END