WordPress-让你的代码高亮更好看-知更鸟主题css美化

今天，小笨又拿鸟哥的主题开刀（美化）了，更新了代码高亮的样式，二话不说，先上图：

主要是左侧的数字增加了渐变样式，比之前黑乎乎的代码高亮好看多了，至于文字的颜色，有前端基础的童鞋可以重新调整一下。

 

样式代码

样式代码只要丢进wordpress->自定义->额外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;
}

更多请关注小笨分享站！