B2主题是自带代码美化的,但可能颜色搭配不是特别理想,本文提供了一段通用的代码来实现代码高亮的美化,不仅仅适用于B2主题。
实现代码
/*
* B2主题代码高亮美化
*/
#nuandao .entry-content pre {
position: relative;
border-radius: 6px;
background: #21252b;
padding-top: 50px;
box-shadow: 0px 8px 20px -10px #000;
}
#nuandao .entry-content pre:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
border-radius: 50%;
background: #fc625d;
margin: 15px 25px;
}
#nuandao .entry-content pre:before {
content: '';
position: absolute;
top: 0;
left: 25px;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 15px 25px;
background: #fdbc40;
}
#nuandao ol.linenums {
background: #2f3640;
padding: 10px 0;
}
#nuandao ol.linenums:after {
content: '';
position: absolute;
top: 0;
left: 50px;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 15px 25px;
background: #35cd4b
}
#nuandao .entry-content pre ol li {
background: transparent;
line-height: 32px;
}
使用方法
将以上代码添加到主题文件夹下style.css
文件中即可。