Matery 之代码块优化
原链接：
1.Matery之代码块优化-腾讯云开发者社区-腾讯云 (tencent.com)
2.matery主题之代码块优化 | zsc’s Blog (zhang-shicong.github.io)
1. 安装代码块插件
1
| npm i -S hexo-prism-plugin
|
2. Hexo根目录配置
打开Hexo根目录的配置文件_config.yml，修改并添加如下代码
1
2
3
4
5
6
7
8
9
| highlight:
enable: false # 关闭原有的高亮代码
# 添加prism_plugin配置项
prism_plugin:
mode: 'preprocess' # realtime/preprocess
theme: 'tomorrow'
line_number: true # default false
custom_css:
|
3. Matery主题根目录
打开Matery主题的配置文件themes\matery\_config.yml，添加如下代码
1
2
3
4
5
| code:
lang: true # 代码块是否显示名称
copy: true # 代码块是否可复制
shrink: true # 代码块是否可以收缩
break: false # 代码是否折行
|
4. 代码块CSS优化
打开themes\source\css\matery.css，大概在100到200行左右,修改代码块CSS样式如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
| pre {
padding: 1.5rem 1.5rem 1.5rem 3.3rem !important;
margin: 1rem 0 !important;
background: #272822;
overflow: auto;
border-radius: 0.35rem;
tab-size: 4;
}
.code-area::after {
content: " ";
position: absolute;
border-radius: 50%;
background: #ff5f56;
width: 12px;
height: 12px;
top: 0;
left: 12px;
margin-top: 12px;
-webkit-box-shadow: 20px 0 #ffbd2e, 40px 0 #27c93f;
box-shadow: 20px 0 #ffbd2e, 40px 0 #27c93f;
}
code {
padding: 1px 5px;
top: 13px !important;
font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
font-size: 0.91rem;
color: #e96900;
background-color: #f8f8f8;
border-radius: 2px;
}
.code_copy {
position: absolute;
top: 0.7rem;
right: 25px;
z-index: 1;
filter: invert(50%);
cursor: pointer;
}
.codecopy_notice {
position: absolute;
top: 0.7rem;
right: 6px;
z-index: 1;
filter: invert(50%);
opacity: 0;
}
.code_lang {
position: absolute;
top: 1.2rem;
right: 46px;
line-height: 0;
font-weight: bold;
font-family: normal;
z-index: 1;
filter: invert(50%);
cursor: pointer;
}
.code-expand {
position: absolute;
top: 4px;
right: 0px;
filter: invert(50%);
padding: 7px;
z-index: 999 !important;
cursor: pointer;
transition: all .3s;
transform: rotate(0deg);
}
.code-closed .code-expand {
transform: rotate(-180deg) !important;
transition: all .3s;
}
.code-closed pre::before {
height: 0px;
}
pre code {
padding: 0;
color: #e8eaf6;
background-color: #272822;
}
pre[class*="language-"] {
padding: 1.2em;
margin: .5em 0;
}
code[class*="language-"],
pre[class*="language-"] {
color: #e8eaf6;
white-space: pre-wrap !important;
}
.line-numbers-rows {
border-right-width: 0px !important;
}
.line-numbers {
padding: 1.5rem 1.5rem 1.5rem 3.2rem !important;
margin: 1rem 0 !important;
background: #272822;
overflow: auto;
border-radius: 0.35rem;
tab-size: 4;
}
|