博客园美化插入代码css

最近有几个博客园的朋友们私信问我怎么设置代码颜色字体的，干脆整理一下。

博客园写博客的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渲染代码高亮

来源：oschina

链接：https://my.oschina.net/u/4365283/blog/4443759

标签

syntaxhighlighter