博客园美化插入代码css
2016-08-20 19:02
686 查看
最近有几个博客园的朋友们私信问我怎么设置代码颜色字体的,干脆整理一下。
博客园写博客的TinyMCE编辑器下添加代码有两种方式,我平时用的是第二种,就是代码背景是一行灰一行白的,行号和代码之间有一条绿色竖线的这种。
首先,字体大小我选择16px:
然后,它的颜色是可以通过css定制的,下面的配色是按我的喜好配的:
另外还有一个我没有修改的:
我还修改了一个小细节,把行号的背景都设置为白色:
2017.4.30更新:博客园设置Google-code-prettify渲染代码高亮
博客园写博客的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渲染代码高亮
相关文章推荐
- 用css alpha 滤镜 实现input file 样式美化代码
- 美化你的网页滚动条几乎所有网页的滚动条都是默认的灰色,如果把它的颜色换换,来点另类的,相信一定会使网页更加靓丽。我们只要在网页代码 之间插入下面的代码,即可随心所欲地更改颜色了。
- HTML/CSS/Javascript代码在线压缩、格式化(美化)工具
- 博客园_插入代码(推荐)_按钮功能实现_代码高亮显示
- HTML/CSS/Javascript代码在线压缩、格式化(美化)工具
- CSS鼠标样式大全和鼠标指针代码 【来美化你的blog吧】
- CSS Beautify – 方便的在线 CSS 代码美化工具
- HTML/CSS/Javascript代码在线压缩、格式化(美化)工具
- HTML/CSS/Javascript代码在线压缩、格式化(美化)工具
- smarty 在css中插入代码
- 校内网CSS代码美化要注意的三点问题 www.xiaoneiwangdaima8.cn
- CSS 漂亮搜索框美化代码
- 【代码美化】CSS代码格式化和JS代码格式化工具
- HTML/CSS/Javascript代码在线压缩、格式化(美化)工具
- 小技巧:如何在(博客园)TinyMCE编辑器模式下同时插入Flash和Sliverlight以及代码运行框
- 用css alpha 滤镜 实现input file 样式美化代码
- css美化input file按钮的代码方法
- 2010-4-7 美化CSS代码备份
- 只用CSS美化选择框的实现代码
- CSS 漂亮搜索框美化代码