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

小笨 2020年4月28日21:13:49 发表评论 596 views

今天,小笨又拿鸟哥的主题开刀(美化)了,更新了代码高亮的样式,二话不说,先上图:

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

 

weinxin
【微信~支付宝~QQ】打赏
如果本文对你有所帮助,请打赏~1元就足够感动我
小笨

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: