博客園美化插入代碼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渲染代碼高亮