WordPress知更鸟begin主题自定义默认代码高亮样式

WordPress知更鸟begin主题自定义默认代码高亮样式

WP知更鸟begin主题文章阅读页默认的代码高亮样式是暗色的,看着虽然护眼,但毕竟与主题有点不搭,看起来怪怪的。简单自定义了一下灰白色、虚线边框的样式,个人看起来舒服多了。

通过登陆后台 → 外观 → 主题选项 → 定制风格 →自定义样式,在框里面添加如下CSS,效果就和本站一样了。

.prettyprint,pre.prettyprint {
    background:#fff;
    background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
    border:1px dashed #ccc;
}
.prettyprint:hover,pre.prettyprint:hover {
    background:#fafafa;
    background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
    border:1px dashed #0088cc;
}
.prettyprint.linenums,pre.prettyprint.linenums {
    -webkit-box-shadow:none;
    box-shadow:none;
    border-radius:0;
}
.prettyprint.linenums,pre.prettyprint.linenums .linenums{
    background-color:#fafafa;
}
.prettyprint.linenums ol,pre.prettyprint.linenums ol {
    counter-reset: my-counter;
}
.prettyprint .pun,.prettyprint .opn,.prettyprint .clo {
    color:#ccc;
}
.prettyprint .typ,.prettyprint .atn,.prettyprint .dec,.prettyprint .var {
    color:#090;
}
.prettyprint .lit {
    color:#f15a22;
}
.prettyprint .com {
    color:#694d9f;
}
.prettyprint .pln {
    color:#09a;
}
.prettyprint .pun {
    color:#ef5b9c;
}
.prettyprint.linenums ol li,pre.prettyprint.linenums ol li{
    list-style: none;
    margin:6px 0px;
    padding-left:19px;
}
.prettyprint.linenums ol li:before,pre.prettyprint.linenums ol li:before{
    content: counter(my-counter);
    counter-increment: my-counter;
    background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
    color: white;
    display: block;
    float: left;
    line-height: 22px;
    margin-left: -30px;
    text-align: center;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    font-size:12px;
}