惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Schneier on Security
Schneier on Security
T
The Blog of Author Tim Ferriss
Engineering at Meta
Engineering at Meta
GbyAI
GbyAI
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Microsoft Security Blog
Microsoft Security Blog
I
InfoQ
罗磊的独立博客
小众软件
小众软件
H
Help Net Security
Vercel News
Vercel News
M
MIT News - Artificial intelligence
雷峰网
雷峰网
Stack Overflow Blog
Stack Overflow Blog
D
Docker
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
H
Heimdal Security Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
Application and Cybersecurity Blog
Application and Cybersecurity Blog
W
WeLiveSecurity
Google DeepMind News
Google DeepMind News
B
Blog
Forbes - Security
Forbes - Security
T
Troy Hunt's Blog
月光博客
月光博客
The Cloudflare Blog
Last Week in AI
Last Week in AI
J
Java Code Geeks
Jina AI
Jina AI
TaoSecurity Blog
TaoSecurity Blog
Google Online Security Blog
Google Online Security Blog
C
Check Point Blog
PCI Perspectives
PCI Perspectives
SecWiki News
SecWiki News
P
Proofpoint News Feed
Attack and Defense Labs
Attack and Defense Labs
Cisco Talos Blog
Cisco Talos Blog
V
Visual Studio Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
The Last Watchdog
The Last Watchdog
F
Full Disclosure
T
Threatpost
NISL@THU
NISL@THU
量子位
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
F
Fortinet All Blogs
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
Hugging Face - Blog
Hugging Face - Blog
有赞技术团队
有赞技术团队

Butterfly

Butterfly 5.6 Release Notes Butterfly 5.5 Release Notes Butterfly 5.4 Release Notes Butterfly 5.3 Release Notes Butterfly 5.2 Release Notes Butterfly 5.1 Release Notes Butterfly 5.0 Release Notes Butterfly 4.13 Release Notes Butterfly 4.12 Release Notes Butterfly 4.11 Release Notes Butterfly 4.10 Release Notes Butterfly Changelog Butterfly document - Advanced Tutorial Butterfly document - Q&A Butterfly document - Tag Plugins Butterfly document - Theme Configuration Butterfly document - Theme Pages Butterfly document - Get Started Custom Sidebar When Setting top_img to false no cover Tag Plugins Markdown Style test
Customize code coloring
Jerry · 2020-06-13 · via Butterfly

This article serves as a practical tutorial on using custom code coloring.

We'll take the example of using the Kimbie dark theme for code coloring.

Modify the _config.yml file in the root directory of your Hexo project.

Edit the theme configuration file.

Create a folder named self in the source folder of your Hexo project. Inside the self folder, create a file named Kimbiedark.css.

Copy the CSS code of Kimbie dark from Github and paste it into Kimbiedark.css. (Alternatively, you can directly download this CSS file from Github)

After running Hexo, you should be able to see the modified effect.

Using the prism-duotone-light theme for color scheme customization.

Create a self folder in the source directory of Hexo and then create a duotone.css file inside the self folder.

Copy the CSS code for prism-duotone-light from Github to the duotone.css file. (You can also directly download this CSS from Github)

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172








code[class*="language-"],
pre[class*="language-"] {
font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
font-size: 14px;
line-height: 1.375;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;

-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;

-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
background: #faf8f5;
color: #728fcb;
}

pre > code[class*="language-"] {
font-size: 1em;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #faf8f5;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #faf8f5;
}


pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}


:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #b6ad9a;
}

.token.punctuation {
color: #b6ad9a;
}

.token.namespace {
opacity: .7;
}

.token.tag,
.token.operator,
.token.number {
color: #063289;
}

.token.property,
.token.function {
color: #b29762;
}

.token.tag-id,
.token.selector,
.token.atrule-id {
color: #2d2006;
}

code.language-javascript,
.token.attr-name {
color: #896724;
}

code.language-css,
code.language-scss,
.token.boolean,
.token.string,
.token.entity,
.token.url,
.language-css .token.string,
.language-scss .token.string,
.style .token.string,
.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit,
.token.statement,
.token.regex,
.token.atrule {
color: #728fcb;
}

.token.placeholder,
.token.variable {
color: #93abdc;
}

.token.deleted {
text-decoration: line-through;
}

.token.inserted {
border-bottom: 1px dotted #2d2006;
text-decoration: none;
}

.token.italic {
font-style: italic;
}

.token.important,
.token.bold {
font-weight: bold;
}

.token.important {
color: #896724;
}

.token.entity {
cursor: help;
}

pre > code.highlight {
outline: .4em solid #896724;
outline-offset: .4em;
}




.line-numbers .line-numbers-rows {
border-right-color: #ece8de;
}

.line-numbers-rows > span:before {
color: #cdc4b1;
}




.line-highlight {
background: rgba(45, 32, 6, 0.2);
background: -webkit-linear-gradient(left, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0));
background: linear-gradient(to right, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0));
}
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194












:root {
--hl-color: #728fcb;
--hl-bg: #faf8f5;
--hltools-bg: xxxxxxx;
--hltools-color: xxxxxxx;
--hlnumber-bg: xxxxxxx;
--hlnumber-color: xxxxxxxx;
--hlscrollbar-bg: xxxxx;
--hlexpand-bg: xxxxxxx
}






code[class*="language-"],
pre[class*="language-"] {
font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
font-size: 14px;
line-height: 1.375;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;

-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;

-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
background: #faf8f5;
color: #728fcb;
}

pre > code[class*="language-"] {
font-size: 1em;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #faf8f5;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #faf8f5;
}


pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}


:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
}



.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #b6ad9a;
}

.token.punctuation {
color: #b6ad9a;
}

.token.namespace {
opacity: .7;
}

.token.tag,
.token.operator,
.token.number {
color: #063289;
}

.token.property,
.token.function {
color: #b29762;
}

.token.tag-id,
.token.selector,
.token.atrule-id {
color: #2d2006;
}

code.language-javascript,
.token.attr-name {
color: #896724;
}

code.language-css,
code.language-scss,
.token.boolean,
.token.string,
.token.entity,
.token.url,
.language-css .token.string,
.language-scss .token.string,
.style .token.string,
.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit,
.token.statement,
.token.regex,
.token.atrule {
color: #728fcb;
}

.token.placeholder,
.token.variable {
color: #93abdc;
}

.token.deleted {
text-decoration: line-through;
}

.token.inserted {
border-bottom: 1px dotted #2d2006;
text-decoration: none;
}

.token.italic {
font-style: italic;
}

.token.important,
.token.bold {
font-weight: bold;
}

.token.important {
color: #896724;
}

.token.entity {
cursor: help;
}

pre > code.highlight {
outline: .4em solid #896724;
outline-offset: .4em;
}




.line-numbers .line-numbers-rows {
border-right-color: #ece8de;
}

.line-numbers-rows > span:before {
color: #cdc4b1;
}




.line-highlight {
background: rgba(45, 32, 6, 0.2);
background: -webkit-linear-gradient(left, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0));
background: linear-gradient(to right, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0));
}

After running Hexo, you should be able to see the modified effect.