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

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

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

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

//文章页面高亮代码复制粘贴-https://www.dzw6.com/26411.html
function initCodeBlocks() {
    document.querySelectorAll('.entry-content pre.prettyprint:not([data-code-processed])').forEach((preEl, index) => {
        // 标记已处理防止重复
        preEl.setAttribute('data-code-processed', 'true');
        
        // 生成唯一ID（改进唯一性）
        const uniqueID = 'code-block-' + index + '-' + Math.random().toString(36).substr(2, 9);
        preEl.id = uniqueID;

        // 创建容器和按钮
        const wrapper = document.createElement('div');
        wrapper.className = 'code-highlight-wrapper';
        
        const copyBtn = document.createElement('button');
        copyBtn.className = 'copy-btn';
        copyBtn.setAttribute('data-clipboard-target', '#' + uniqueID);
        copyBtn.textContent = '一键复制';

        // 重组DOM结构
        preEl.parentNode.insertBefore(wrapper, preEl);
        wrapper.appendChild(preEl);
        wrapper.appendChild(copyBtn);

        // 初始化剪贴板
        new ClipboardJS(copyBtn).on('success', function(e) {
            e.clearSelection();
            e.trigger.textContent = '复制成功';
            e.trigger.style.backgroundColor = '#4CAF50';
            
            setTimeout(() => {
                e.trigger.textContent = '一键复制';
                e.trigger.style.backgroundColor = '';
            }, 2000);
        });
    });
}

// 页面加载初始化
document.addEventListener('DOMContentLoaded', function() {
    initCodeBlocks();
    
    // 监听DOM变化（处理动态内容）
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(() => initCodeBlocks());
    });
    
    observer.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: false,
        characterData: false
    });
});
//文章页面高亮代码复制粘贴-https://www.dzw6.com/26411.html

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

/**代码高亮开始-https://www.dzw6.com/26411.html**/
.code-highlight-wrapper {
    position: relative;
    margin: 1.5em 0;
    border-radius: 6px;
    box-shadow: 0px 8px 20px -10px rgba(0,0,0,0.2);
}
.entry-content pre.prettyprint {
    position: relative;
    background: #21252b !important;
    padding: 50px 20px 20px !important;
    margin: 0 !important;
    overflow-x: auto;
}
.entry-content pre.prettyprint:before {
    content: '';
    position: absolute;
    top: 15px;
    left: 25px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fc625d;
    z-index: 2;
}
.entry-content pre.prettyprint:after {
    content: '';
    position: absolute;
    top: 15px;
    left: 50px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fdbc40;
    z-index: 2;
}
ol.linenums:after {
    content: '';
    position: absolute;
    top: 15px;
    left: 75px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #35cd4b;
    z-index: 2;
}
.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    background: rgba(255,255,255,0.1);
    color: #feff33;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    backdrop-filter: blur(5px);
}

.copy-btn:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-1px);
}

.copy-btn:active {
    transform: translateY(0);
}
@media (max-width: 768px) {
    .copy-btn {
        padding: 6px 12px;
        font-size: 13px;
        top: 8px;
        right: 8px;
    }
    
    .entry-content pre.prettyprint {
        padding-top: 40px !important;
    }
}
/**代码高亮结束-https://www.dzw6.com/26411.html**/

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