B2主题美化:代码高亮美化

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文件中即可。

人已赞赏
WordPress美化

B2主题美化:文章下载内容美化

2020-10-11 0:00:00

WordPress美化

WordPress美化 - 94设计素材网大气搜索框区块

2020-10-25 0:00:00

⚠️
恩月阁文章由星九进行编写或整理,部分内容来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
若无意中侵害到您的权益,请发送邮件至 xingjiu@nuue.cn 或点击右侧 私信:星九 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索