AfarX

A Rookie of R.

Hexo自定义代码块颜色、字体、高亮

Menu
  1. 1. 修改代码字体
  2. 2. 修改代码块背景及字符颜色
  3. 3. 代码高亮设置
  4. 4. 嵌入代码框颜色设置

基于Hacker模板进行优化。

修改代码字体

文件目录是themes/Hacker/source/css/base/normalize.css
找到code

1
2
3
4
5
6
7
code,
kbd,
pre,
samp {
font-family: Consolas, Menlo; /*设置代码字体*/
font-size: 1em;
}

之前默认设置的字体我没有安装,所以一直显示的宋体,非常丑,后来改成Consolas,感觉世界都美好了。

修改代码块背景及字符颜色

文件目录是themes/Hacker/source/css/components/syntax.styl
找到figure.highlight

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
figure.highlight
background #000000 /*代码块背景颜色*/
border 1px solid color-border
margin 1em 0
padding 1em /*内边距,代码上下各空一行*/
border-radius 10px /*代码块圆角*/
text-shadow 0 0 5px #000000/*代码字符阴影,保持和背景颜色一致则无阴影*/

……

.gutter
color color-meta /*代码序号颜色*/
width 20px
padding-right 15px
border-right 1px solid color-border
text-align right

.code
padding-left 15px
border-left 1px solid #fff /*代码与序号之间的线*/
color #840228 /*代码文本颜色*/

.line
height: 20px

代码高亮设置

接着之前的代码,找到pre部分,即可设置代码高亮。
当前高亮采用的是Tomorrow-night配色,更多配色见highlight.js

1
2
3
4
5
6
/*这一段与Hexo-light一致*/
pre
// Theme: Solarized - Light
// More theme here: http://softwaremaniacs.org/media/soft/highlight/test.html

……

嵌入代码框颜色设置

文件目录是themes/Hacker/source/css/components/article.styl

1
2
3
4
5
6
7
8
code
padding 2px 4px
margin-left 2px
margin-right 2px
color #fffafa /*代码框文本颜色*/
background-color #363636 /*代码框背景颜色*/
white-space normal
border-radius 3px

好了,对代码的调试就到这里吧……
基本满足自己的审美需求了……