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

推荐订阅源

T
Threatpost
G
Google Developers Blog
Latest news
Latest news
Know Your Adversary
Know Your Adversary
O
OpenAI News
腾讯CDC
月光博客
月光博客
P
Privacy International News Feed
Google Online Security Blog
Google Online Security Blog
Help Net Security
Help Net Security
L
LINUX DO - 最新话题
雷峰网
雷峰网
AI
AI
Hacker News - Newest:
Hacker News - Newest: "LLM"
有赞技术团队
有赞技术团队
N
News and Events Feed by Topic
V
Vulnerabilities – Threatpost
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
D
Docker
Google DeepMind News
Google DeepMind News
T
Tor Project blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Hacker News: Ask HN
Hacker News: Ask HN
爱范儿
爱范儿
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
H
Heimdal Security Blog
I
Intezer
WordPress大学
WordPress大学
C
CERT Recently Published Vulnerability Notes
Attack and Defense Labs
Attack and Defense Labs
www.infosecurity-magazine.com
www.infosecurity-magazine.com
P
Privacy & Cybersecurity Law Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
V
V2EX
博客园 - 三生石上(FineUI控件)
G
GRAHAM CLULEY
Security Archives - TechRepublic
Security Archives - TechRepublic
F
Fortinet All Blogs
L
LangChain Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
Spread Privacy
Spread Privacy
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
V2EX - 技术
V2EX - 技术
Stack Overflow Blog
Stack Overflow Blog
Recent Announcements
Recent Announcements
T
Tenable Blog
Microsoft Azure Blog
Microsoft Azure Blog
V
Visual Studio Blog
SecWiki News
SecWiki News
Cisco Talos Blog
Cisco Talos 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.