前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >博客园美化插入代码css

博客园美化插入代码css

作者头像
饶文津
发布2020-06-02 15:54:19
5820
发布2020-06-02 15:54:19
举报

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

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-08-20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档