博客园美化插入代码css

2020-06-02 15:54:19 浏览数 (1)

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

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

0 人点赞