如何修改Typora中的markdown样式

蔚落 2021-06-10 20:38 602阅读 0赞

Typora是一款优秀的markdown文本编辑器，可以用markdown语法来编辑文本的样式，它默认含有`GitHub、Newsprint、Night、Pixyll、whitey`五种主题。如果对这些主题的默认样式不满意也可以去自定义markdown样式。  
1.启动Typora编辑器，选择`文件-偏好设置`。  
![format_png][]  
2.在`通用-高级设置`中勾选`开启调试模式`。  
![format_png 1][]  
3.在`外观-主题`中点击`打开主题文件夹`按钮。  
![format_png 2][]  
4.在打开的文件夹中，我们可以看到以`GitHub、Newsprint、Night、Pixyll、whitey`五种主题命名的css文件，默认是GitHub主题，打开`github.css`，如果使用的是其它主题就打开其他主题对应的css文件即可。  
![typora-4.png][]  
5.回到Typora编辑器，比如我们来使用\`\`语法编写一个带背景色的文本，默认是灰色背景，黑色文本，我们可以尝试把它变成紫色背景，白色文本。只需要在编辑器中右键选择`检查元素`，可以发现它的右侧弹出一个和谷歌浏览器开发者模式非常相似的调试界面，实际上Typora确实是一个简易版的浏览器。我们点击左上角的箭头，移动到我们的目标文本上，右侧就可以定位到它的HTML代码和css样式，我们可以发现目标文本是被一个code标签包裹的。  
![format_png 3][]  
6.我们可以在github.css文件中找到这个元素选择器，只需要修改此选择器的样式即可自定义该文本的样式。修改css代码如下：

code {
      //background-color: #f3f4f4;
      background:blueviolet;
      //padding: 0 2px 0 2px;
      padding: 2px 4px 2px 4px;
      color:#FFFFFF;
      font-weight:bold;
    }

7.保存css文件，重新打开Typora编辑器，发现目标文本的样式已经变成我们自己定义的样式了，说明配置生效了。具体效果如步骤5图片所示 。其它文本样式的修改原理也是一样的，在此不再赘述。

[format_png]: /images/20210607/9893d8eb0c0745898de2e3c6008c6941.png
[format_png 1]: /images/20210607/7582d64e4d1a4cdabe0ffa0c9e444167.png
[format_png 2]: /images/20210607/73d8d516ae874e04888994f8e98b5a38.png
[typora-4.png]: /images/20210607/9d17c51df4ea4487b4045c8565483bd4.png
[format_png 3]: /images/20210607/d22f2881d6f249a6bc730a427276142f.png