基于Hacker模板进行优化。
修改代码字体
文件目录是themes/Hacker/source/css/base/normalize.css
找到code
code,
kbd,
pre,
samp {
font-family: Consolas, Menlo; /*设置代码字体*/
font-size: 1em;
}
之前默认设置的字体我没有安装,所以一直显示的宋体,非常丑,后来改成Consolas,感觉世界都美好了。
修改代码块背景及字符颜色
文件目录是themes/Hacker/source/css/components/syntax.styl
找到figure.highlight
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
/*这一段与Hexo-light一致*/
pre
// Theme: Solarized - Light
// More theme here: http://softwaremaniacs.org/media/soft/highlight/test.html
……
嵌入代码框颜色设置
文件目录是themes/Hacker/source/css/components/article.styl
code
padding 2px 4px
margin-left 2px
margin-right 2px
color #fffafa /*代码框文本颜色*/
background-color #363636 /*代码框背景颜色*/
white-space normal
border-radius 3px
好了,对代码的调试就到这里吧……
基本满足自己的审美需求了……