WordPress网站B2主题美化之代码高亮+一键复制
今天老白博客@老白跟大家分享一下“WordPress网站B2主题美化之代码高亮+一键复制”版,其他主题需自行调整使用
1.代码一键复制功能代码-child.js文件
(原文转载自https://www.sdklib.com/5771.html,感谢站长分享)
//文章页面高亮代码复制粘贴-https://www.xcbtmw.com/26354.html
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) {
//console.info(e.text); 提示
e.clearSelection();
e.trigger.innerHTML = "一键复制成功";
e.trigger.disabled = true;
setTimeout(function() {
e.trigger.innerHTML = "一键复制";
e.trigger.disabled = false;
},
2000);/**时长**/
});
//文章页面高亮代码复制粘贴-https://www.xcbtmw.com/26354.html
2.代码一键复制美化代码-style.css文件
/**代码高亮-https://www.xcbtmw.com/26354.html**/
.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;
}
/**代码高亮-https://www.xcbtmw.com/26354.html**/
相关文章请点击文末标签阅读!
没有子主题而引用代码会报错:Uncaught TypeError: $ is not a function at child.js:2:21
这个错误提示 Uncaught TypeError: $ is not a function 表明 $ 符号没有被识别为一个函数,这通常是因为 jQuery 库没有被正确引入,或者 child.js 文件在 jQuery 加载之前就已经被执行了。
由于 WordPress 使用 "no conflict" 模式加载 jQuery,我们可以直接使用 jQuery 代替 $。修改 child.js即可
具体可以看:https://www.ivmei.cn/jingpinjiaocheng/162
没有子主题怎么添加呀