您的位置:首页 > Web前端 > CSS

博客园美化插入代码css

2016-08-20 19:02 686 查看
最近有几个博客园的朋友们私信问我怎么设置代码颜色字体的,干脆整理一下。

博客园写博客的TinyMCE编辑器下添加代码有两种方式,我平时用的是第二种,就是代码背景是一行灰一行白的,行号和代码之间有一条绿色竖线的这种。

#include<cstdio>
int main(){
printf("Hello world!\n");//你好,世界!
}


首先,字体大小我选择16px:

.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定制的,下面的配色是按我的喜好配的:

.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;
}


另外还有一个我没有修改的:

.syntaxhighlighter .functions {/*scanf/printf等函数*/
color: #ff1493!important;
}


我还修改了一个小细节,把行号的背景都设置为白色:

.gutter .line.alt2{
background: #fff!important;
}


2017.4.30更新:博客园设置Google-code-prettify渲染代码高亮
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: