博客园美化插入代码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渲染代码高亮
┆凉┆暖┆降┆等┆幸┆我┆我┆里┆将┆ ┆可┆有┆谦┆戮┆那┆ ┆大┆始┆ ┆然┆
┆薄┆一┆临┆你┆的┆还┆没┆ ┆来┆ ┆是┆来┆逊┆没┆些┆ ┆雁┆终┆ ┆而┆
┆ ┆暖┆ ┆如┆地┆站┆有┆ ┆也┆ ┆我┆ ┆的┆有┆精┆ ┆也┆没┆ ┆你┆
┆ ┆这┆ ┆试┆方┆在┆逃┆ ┆会┆ ┆在┆ ┆清┆来┆准┆ ┆没┆有┆ ┆没┆
┆ ┆生┆ ┆探┆ ┆最┆避┆ ┆在┆ ┆这┆ ┆晨┆ ┆的┆ ┆有┆来┆ ┆有┆
┆ ┆之┆ ┆般┆ ┆不┆ ┆ ┆这┆ ┆里┆ ┆没┆ ┆杀┆ ┆来┆ ┆ ┆来┆