wordpress登录美化css,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;

}

更多请关注小笨分享站！