B2主题代码高亮代码-美化版

B2主题自带的代码高亮没有一键复制,遇到长代码的时候,还得选中一直滑动鼠标才可以复制,容易断选,结合了网上教程这边做了一个一键复制的js代码。

把下面的js代码加到子主题的child.js文件里头

//文章页面高亮代码复制粘贴
for (var i = 0; i < $(".prettyprint").length; i++) {
$(".prettyprint").eq(i).append('<span class="copy" data-clipboard-target="#copy'+ i +'">一键复制</span>');
$(".prettyprint").eq(i).attr('id','copy'+ i);
}
var clipboard = new ClipboardJS('.copy');
clipboard.on('success', function(e) {

下面css代码加到子主题的style.css文件里头

/**代码高亮**/
.entry-content pre:before {
content: '';
position: absolute;
top: 0;
left: 25px;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 15px 25px;
background: #fdbc40;
}
ol.linenums:after {
content: '';
position: absolute;
top: 0;
left: 50px;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 15px 25px;
background: #35cd4b;
}.entry-content pre:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
border-radius: 50%;
background: #fc625d;
margin: 15px 25px;
}.entry-content pre {
position: relative;
border-radius: 6px;
/**background: #21252b;**/
padding-top: 50px;
box-shadow: 0px 8px 20px -10px #000;
}.entry-content pre .copy {
position: absolute;
top: 0;
right: 0;
margin: 10px 20px;
cursor: pointer;
color: #8224e3;
}
/**代码高亮**/

给TA打赏
共{{data.count}}人
人已打赏
B2PRO美化

B2主题专用暗黑模式cookie版本

2021-7-7 20:14:37

B2PRO美化

wordpress博客b2主题致美化首页区块

2021-7-11 19:27:17

⚠️
wp百科网上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 aqiang-212@qq.com 或点击右侧 私信:wpbkw 反馈,我们将尽快处理。
3 条回复 A文章作者 M管理员
  1. BAICAI

    代码部署好记得强制刷新下或者清理下缓存

  2. 狗哥

    隐藏内容支付后不能回调….掉单了

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索