WordPress网站B2主题美化代码高亮+复制（2025更新）

今天地质网@老白跟大家分享一下“WordPress网站B2主题美化代码高亮+复制（2025更新）”版，其他主题需自行调整使用

1.代码一键复制功能代码-child.js文件

（原文转载自https://thax.cn/5834.html，老白修改完善，感谢站长分享）

//文章页面高亮代码复制粘贴-https://www.dzw6.com/26354.html
// 使用唯一ID生成方案
document.querySelectorAll('.prettyprint').forEach((el, i) => {
    const uniqueID = 'copy-' + i + '-' + Math.random().toString(36).substr(2, 9);
    el.id = uniqueID;
    el.innerHTML += `一键复制`;
});
// 使用事件委托处理动态内容
document.addEventListener('click', (e) => {
    if (e.target.matches('.copy')) {
        const clipboard = new ClipboardJS(e.target);
        clipboard.on('success', function(e) {
            e.clearSelection();
            e.trigger.innerHTML = "一键复制成功";
            e.trigger.disabled = true;
            setTimeout(() => {
                e.trigger.innerHTML = "一键复制";
                e.trigger.disabled = false;
                clipboard.destroy(); // 避免内存泄漏
            }, 2000);
        });
    }
});
//文章页面高亮代码复制粘贴-https://www.dzw6.com/26354.html

2.代码一键复制美化代码-style.css文件

//文章页面高亮代码复制粘贴-https://www.dzw6.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: #feff33;
padding: 5px 10px;
border-radius: 3px;
font-size: 16px;
transition: all 0.3s;
}
/* 确保伪元素不会覆盖按钮 */
.entry-content pre:before,
.entry-content pre:after,
ol.linenums:after {
z-index: 1; /* 低于按钮层级 */
}
//文章页面高亮代码复制粘贴-https://www.dzw6.com/26354.html

相关文章请点击文末标签阅读！