最近有几个博客园的朋友们私信问我怎么设置代码颜色字体的,干脆整理一下。
博客园写博客的TinyMCE编辑器下添加代码有两种方式,我平时用的是第二种,就是代码背景是一行灰一行白的,行号和代码之间有一条绿色竖线的这种。
代码语言:javascript复制#include<cstdio>
int main(){
printf("Hello world!n");//你好,世界!
}
首先,字体大小我选择16px:
代码语言:javascript复制.cnblogs_code,.cnblogs_code span{
font-size:16px!important;
}
.syntaxhighlighter a, .syntaxhighlighter div,
.syntaxhighlighter code, .syntaxhighlighter table,
.syntaxhighlighter table td, .syntaxhighlighter table tr,
.syntaxhighlighter table tbody, .syntaxhighlighter table thead,
.syntaxhighlighter table caption, .syntaxhighlighter textarea {
font-size: 16px!important;
}
然后,它的颜色是可以通过css定制的,下面的配色是按我的喜好配的:
代码语言:javascript复制.syntaxhighlighter .preprocessor {/*头文件、预编译部分*/
color: #e29710!important;
}
.syntaxhighlighter .keyword {/*关键字(for/if...else/while/return...)*/
font-weight: normal!important;
color: #b216ac!important;
}
.syntaxhighlighter .comments,
.syntaxhighlighter .comments a {/*注释*/
color: #d84f19!important;
}
.syntaxhighlighter .color1,
.syntaxhighlighter .color1 a {/*int等变量类型名*/
color: #15b6bf!important;
}
.syntaxhighlighter .string,
.syntaxhighlighter .string a {/*字符串*/
color: #1bbb38!important;
}
另外还有一个我没有修改的:
代码语言:javascript复制.syntaxhighlighter .functions {/*scanf/printf等函数*/
color: #ff1493!important;
}
我还修改了一个小细节,把行号的背景都设置为白色:
代码语言:javascript复制.gutter .line.alt2{
background: #fff!important;
}
2017.4.30更新:博客园设置Google-code-prettify渲染代码高亮