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;
}