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

推荐订阅源

Cisco Talos Blog
Cisco Talos Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Martin Fowler
Martin Fowler
Recent Announcements
Recent Announcements
博客园 - 三生石上(FineUI控件)
月光博客
月光博客
博客园 - 聂微东
N
Netflix TechBlog - Medium
B
Blog RSS Feed
T
Tailwind CSS Blog
宝玉的分享
宝玉的分享
有赞技术团队
有赞技术团队
S
SegmentFault 最新的问题
The Register - Security
The Register - Security
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
博客园 - 司徒正美
J
Java Code Geeks
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
人人都是产品经理
人人都是产品经理
Engineering at Meta
Engineering at Meta
T
The Blog of Author Tim Ferriss
C
CXSECURITY Database RSS Feed - CXSecurity.com
AWS News Blog
AWS News Blog
The Hacker News
The Hacker News
Scott Helme
Scott Helme
MongoDB | Blog
MongoDB | Blog
C
CERT Recently Published Vulnerability Notes
L
Lohrmann on Cybersecurity
C
Cybersecurity and Infrastructure Security Agency CISA
P
Proofpoint News Feed
T
The Exploit Database - CXSecurity.com
S
Securelist
MyScale Blog
MyScale Blog
A
Arctic Wolf
V2EX - 技术
V2EX - 技术
The GitHub Blog
The GitHub Blog
Simon Willison's Weblog
Simon Willison's Weblog
H
Hacker News: Front Page
D
DataBreaches.Net
S
Secure Thoughts
腾讯CDC
TaoSecurity Blog
TaoSecurity Blog
Project Zero
Project Zero
H
Help Net Security
P
Privacy International News Feed
Cloudbric
Cloudbric
博客园_首页
Latest news
Latest news
小众软件
小众软件

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.