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

推荐订阅源

B
Blog RSS Feed
V2EX - 技术
V2EX - 技术
P
Privacy & Cybersecurity Law Blog
T
The Exploit Database - CXSecurity.com
美团技术团队
WordPress大学
WordPress大学
博客园 - 司徒正美
S
Securelist
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
博客园 - Franky
Attack and Defense Labs
Attack and Defense Labs
Security Latest
Security Latest
L
LINUX DO - 最新话题
NISL@THU
NISL@THU
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
腾讯CDC
Y
Y Combinator Blog
The Hacker News
The Hacker News
Security Archives - TechRepublic
Security Archives - TechRepublic
IT之家
IT之家
T
Threatpost
Hugging Face - Blog
Hugging Face - Blog
Scott Helme
Scott Helme
S
SegmentFault 最新的问题
Cyberwarzone
Cyberwarzone
C
Cisco Blogs
阮一峰的网络日志
阮一峰的网络日志
U
Unit 42
B
Blog
Microsoft Azure Blog
Microsoft Azure Blog
P
Proofpoint News Feed
小众软件
小众软件
V
Vulnerabilities – Threatpost
J
Java Code Geeks
V
Visual Studio Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
A
Arctic Wolf
博客园 - 【当耐特】
Microsoft Security Blog
Microsoft Security Blog
S
Security @ Cisco Blogs
雷峰网
雷峰网
Help Net Security
Help Net Security
The Last Watchdog
The Last Watchdog
Recent Announcements
Recent Announcements
G
Google Developers Blog
C
CERT Recently Published Vulnerability Notes
T
Troy Hunt's Blog
MyScale Blog
MyScale 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.