Typora美化思路分享

一、美化后的效果

标题

引用加粗

选中

正文

表格

二、具体思路

2.0前言

基于Github主题

Typor版本信息:version 1.2.4

2.1字体

2.1.1字体样式

字体样式

设置字体样式之前，需要电脑本地有这个字体才可以设置。

去哪里找字体？推荐一个Google的免费字体库 ，可能需要科学上网才能打开。

因为我是Java程序员，比较喜欢Jetbrains的设计，我的字体是在这下载的

选择自己喜欢的字体，下载下来。

下载之后解压开下载的文件夹，选中ttf后缀的文件，鼠标右键安装（Windows10系统），其他系统自行百度

接下来修改CSS样式

在根目录下新建 base.user.css 文件（可选，这是全局设置字体样式），添加如下配置

.CodeMirror-wrap .CodeMirror-code pre {	
	font-family: "JetBrains Mono", "Microsoft YaHei"
}
1
2
3

作为一个程序员怎么能少了代码块字体的设置呢？如何设置代码块字体

在github.css 的文件下，找到code

添加如下样式

code {
	font-size: 13px;
	background-color: var( --bg-color5);
	padding: .3em;
		padding-top : 0.15em;
		padding-bottom: 0.15em;
	border: 2px solid#666;
	border-radius: 0.25rem ; 
	font-family: "JetBrains Mono"，"Microsoft YaHei" ;
}
1
2
3
4
5
6
7
8
9
10

我的字体是**“JetBrains Mono”**，所以把 “JetBrains Mono” 放在最前面就可以了

关于怎么知道下载的字体font-family的名字呢？

2.1.2字体大小，行距

字体大小，行距

如何调整字体大小？

更改font-size: 12px;的大小

如何调整行距大小？

更改line-height: 2.0;的大小

body {
    font-family: "JetBrains Mono", "Microsoft YaHei";
    color: rgb(51, 51, 51);
    line-height: 2.0;
	font-size: 12px;
}
1
2
3
4
5
6

代码块同理，更改这里

code {
    
	font-size: 13px;
	line-height: 1.2;
	background-color: var( --bg-color5);
	padding: .3em;
		padding-top : 0.15em;
		padding-bottom: 0.15em;
	border: 2px solid#666;
	border-radius: 0.25rem ; 
	font-family: "JetBrains Mono"，"Microsoft YaHei" ;
}
1
2
3
4
5
6
7
8
9
10
11
12

我的字体大小和行距是根据JetBrains的推荐设置的，大家可以自由发挥

2.1.3标题颜色

标题颜色

同样在github.css设置字体颜色

/* 修改标题颜色 */

h1 {
color: #C0D695; 
}
h2{
color:#A9BE7B
}
h3{
color: 779649
}
h4{
color: #4F794A
}
h5{
color:#2A6E3F
}
h6{
color:#4F6F46
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

我的主题色调是春天的绿色和大地的土色，颜色是在这里找到的。大家也可以自由发挥

2.1.4加粗字体样式

加粗字体样式
加粗字体重点突出，我选择换了颜色并且稍微放大字体

/* 加粗样式*/
strong {
    color:#CD7372;
	font-size: 18px;
}
1
2
3
4
5

2.1.5选中背景高亮

/*==选中背景高亮==*/
mark {
    background: #ffffff;
    color: #db3f1e;
    font-weight: bold;
    border-bottom: 0px solid #ffffff;
    padding: 0.0px;
    margin: 0 0px;
}
1
2
3
4
5
6
7
8
9

2.2引用

/* 引用样式*/
blockquote {
    border-left: 4px solid #644D31;
    padding: 0 15px;
    color: #9E8358;
}
blockquote blockquote {
    padding-right: 0;
}
1
2
3
4
5
6
7
8
9

2.3代码块

code {
	font-size: 13px;
	line-height: 1.2;
	background-color: var( --bg-color5);
	padding: .3em;
		padding-top : 0.15em;
		padding-bottom: 0.15em;
	border: 2px solid#666;
	border-radius: 0.25rem ; 
	font-family: "JetBrains Mono"，"Microsoft YaHei" ;
}
1
2
3
4
5
6
7
8
9
10
11

2.4表格

每行的颜色都不一样，好做区分。

/* 表格样式*/
tbody tr:nth-child(even){background-color:#effaff;}
tbody tr:nth-child(odd){background-color:#fff1f6;}
tbody tr:nth-child(1){background-color:#8AE1FC;}
tbody tr:nth-child(2){background-color:#EFA7A7;}
tbody tr:nth-child(3){background-color:#FFD972;}
tbody tr:nth-child(4){background-color:#FCF5FC;}
tbody tr:nth-child(5){background-color:#F3F1EC;}
tbody tr:nth-child(6){background-color:#CCECD6;}
tbody tr:nth-child(7){background-color:#C2DDA6;}
tbody tr:nth-child(8){background-color:#c9af98;}
tbody tr:nth-child(9){background-color:#F5E5FC;}
tbody tr:nth-child(10){background-color:#ed8a63;}
table thead{
white-space:nowrap;
}
table {
width:100%;
table-layout:fixed !important;
word-break:break-word !important;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

三、完整资源(字体、CSS文件)

Github:

蓝奏云 密码:dbzb

四、后记

学业繁忙，随缘更新。

能力有限，难免错误。

如有错误，欢迎指正。

创作不易，对您有帮助希望不吝用您发财的小手点点赞！

五、参考

Bilibili 程序员费曼

CSDN 做梦好啊