美化你的Typora —— 关于MarkDown文档和newsprint.css的一点折腾

这篇文章起源于我想美化一下Markdown样式，我在Typora官方的newsprint风格的基础上对其css进行了一系列的微调，提升了美观度和易用性，解决了如图像缩放分辨率降低、中英文字体设置等问题。

之前一直在纠结使用何种文档的记录方式，尝试了使用VSCode配合MarkDown的模式，但是VSCode的预览始终让我不满意。

最后在Typora中找到了一个比较满意的主题：NewsPrint。

然而还是有部分地方不是很满意，需要在newsprint.css中自己定义css。

0. 美化前后效果对比

美化前

美化后

1. 代码块背景颜色与代码块布局

在NewsPrint的基础上进行了一点css的微调，优化了代码的背景颜色，得到了比较满意的样式。

在newsprint.css文件中修改.md-fences的background-color属性。

code,
.md-fences {
	background-color: #dadada1c; /* 自定义 */
}

还优化了代码块的布局。

在newsprint.css文件中修改.md-fences的布局属性。

.md-fences {  /* 自定义 */
	margin-left: 0em;
	margin-bottom: 1em;
	padding-left: 1ch;
	padding-right: 1ch;
}

2. 关于图片缩放

发现一个与图片缩放有关的问题，在Typora中，图片一般会模糊化，这与CSS有关，具体原因不是很清楚，可能是采用了一些不能保证清晰度的图片缩放算法。

解决方案：在newprint.css中为img标签添加一个样式，作用是在缩放图片时使用最邻近算法，提升缩放图片的清晰度

img {
    image-rendering: -webkit-optimize-contrast; /* 自定义 */
}

3. 关于字体

newprint.css中的字体设置如下

html, body {
    font-family: "PT Serif", 'Times New Roman', Times, serif;
}

个人推荐将PT Serif作为英文字体，Serif是衬线的意思，微软雅黑（Microsoft YaHei）作为中文字体。

新的样式配置如下，将"PT Serif"放在'Microsoft YaHei'的前面，因为'Microsoft YaHei'也包含英文和数字字符，放在前面会覆盖掉"PT Serif"字体。

html, body {
    font-family: "PT Serif", 'Microsoft YaHei'; /* 自定义 */
}

代码快则使用默认的经典consoles字体

4. 关于更新时产生的样式覆盖

根据官方的说明，每次更新Typora时样式文件会被覆盖。但实际上在\AppData\Roaming\Typora\themes\old-themes路径下会保存一份旧版本的样式，使用old-themes文件夹下的newsprint.css替换父目录的newsprint.css，可以快速还原旧的自定义样式。

5. 在VSCode中自定义样式

尝试将VSCode中的样式改为NewsPrint，VSCode中的相关设置为MarkDown.Styles，可以指定一个文件路径或者一个url，在当前版本中，只有放在工作目录下的css文件才能成功加载，而不能使用其他目录下的绝对路径。（文件路径的协议写法为：file:///c:/user/…， 当前工作目录下的相对路径写法为：./newsprint.css）

6. css样式下载与安装

自定义newprint.css文件从下面的连接中获取

链接：https://pan.baidu.com/s/1VBbEEiFU-_e4n1RbgppC_Q
提取码：9c08

替换前请注意备份原文件！

用自定义的newprint.css替换掉 \AppData\Roaming\Typora\themes路径下的原newprint.css样式文件，重启Typora，大功告成！

在版本更新后，从\AppData\Roaming\Typora\themes\old-themes路径下将newprint.css复制到 \AppData\Roaming\Typora\themes下，替换newprint.css文件。

7. 其他

7.1. 关于添加代码块快捷键

添加代码块的默认快捷键"Ctrl+Shift+K"，添加代码片段高亮的快捷键"Ctrl+Shift+"`

该快捷键可能与其他软件的快捷键冲突（例如搜狗输入法的软键盘），可以换成其他快捷键或者关闭其他软件的快捷键。

如果想自定义快捷键，可以在偏好设置中打开高级设置，通过文本你编辑器打开conf.user.json文件，在"keyBinding"下面添加新的快捷键。例如将添加代码块的快捷键设置为"Ctrl+Alt+Z"。

  "keyBinding": {
    // for example: 
    // "Always on Top": "Ctrl+Shift+P"
    // All other options are the menu items 'text label' displayed from each typora menu
    "Code Fences": "Ctrl+Alt+Z"
  },

7.2.图片的自动上传

使用图床解决图片上传的问题（我使用的是PicGo，教程），这样可以无感地将MarkDown发布为博客

如果这篇文章对你有用，可以点个赞再走哦~~