WordPress网站B2主题代码高亮美化

WordPress网站B2主题代码高亮美化，增加一键复制。美化效果：

JS代码添加

将以下代码添加进主题的JS文件中，如果你使用的是B2子主题，那么请将以下JS添加进子主题目录中的child.js中：

jQuery(document).ready(function($) {
    $(".prettyprint").each(function(index) {
        var $this = $(this); // 当前.prettyprint元素
        var copyButton = $('<span class="copy">复制</span>');
        
        // 设置 data-clipboard-target 属性以指向包含要复制文本的包裹元素
        copyButton.attr('data-clipboard-target', '#' + 'copy-target-' + index);
        
        // 如果 .prettyprint 元素内没有 .copy-target，则添加一个
        if (!$this.find('.copy-target').length) {
            $this.wrapInner('<span class="copy-target" id="copy-target-' + index + '"></span>');
        }
        
        // 将复制按钮添加到 .prettyprint 元素中
        $this.append(copyButton);
    });

    var clipboard = new ClipboardJS('.copy');
    clipboard.on('success', function(e) {
        e.clearSelection();
        
        // 将 e.trigger 转换为 jQuery 对象
        var $trigger = $(e.trigger);
        
        // 更改按钮文本为“一键复制成功”并禁用按钮
        $trigger.text("复制成功");
        $trigger.prop('disabled', true);
        
        // 2秒后恢复按钮的原始状态和文本
        setTimeout(function() {
            $trigger.text("复制");
            $trigger.prop('disabled', false);
        }, 2000);
    });

    clipboard.on('error', function(e) {
        console.error('Action failed');
    });
});

代码为技术宅原创代码，请注意如果使用了优化JS等插件可能会报错。

CSS代码添加

将以下代码添加进主题的CSS文件中，如果你使用的是B2子主题，那么请将以下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;
}

以上CSS代码来源于老白博客，感谢分享。

缺点

目前一键复制区块会随着代码一起滑动，有CSS或者JS大佬能优化下辛苦告知下技术宅。

优化版本

window.addEventListener('load', () => {
    setTimeout(() => {
        const preElements = document.querySelectorAll('pre');
        
        preElements.forEach((pre, index) => {
            // 检查是否已经被包装
            if (!pre.parentElement.classList.contains('code-toolbar')) {
                // 创建外层容器
                const wrapper = document.createElement('div');
                wrapper.className = 'code-toolbar';

                // 创建工具栏
                const toolbar = document.createElement('div');
                toolbar.className = 'toolbar';

                // 创建工具栏项目
                const toolbarItem = document.createElement('div');
                toolbarItem.className = 'toolbar-item';

                // 创建复制按钮
                const copyButton = document.createElement('button');
                copyButton.textContent = '一键复制';
                copyButton.setAttribute('data-clipboard-target', '#copy' + index);

                // 设置 pre 的 ID
                pre.id = 'copy' + index;

                // 将 pre 元素包装在新容器中
                pre.parentNode.insertBefore(wrapper, pre);
                wrapper.appendChild(pre);

                // 添加工具栏
                toolbarItem.appendChild(copyButton);
                toolbar.appendChild(toolbarItem);
                wrapper.appendChild(toolbar);
            }
        });

        // 初始化 ClipboardJS
        const clipboardCopy = new ClipboardJS('.toolbar-item button');
        
        clipboardCopy.on('success', function(e) {
            e.clearSelection();
            const trigger = e.trigger;
            trigger.textContent = '复制成功';
            trigger.disabled = true;
            
            setTimeout(() => {
                trigger.textContent = '一键复制';
                trigger.disabled = false;
            }, 2000);
        });
    }, 600);
});

css：

/**代码高亮**/
.code-toolbar {
        position: relative;  /* 父容器使用相对定位 */
        margin: 1em 0;
        background: #2f3640;
        border-radius: 6px;
        padding-top: 40px;
    }
    .code-toolbar:hover .toolbar {
        opacity: 1;
    }
        
    .code-toolbar pre {
        margin: 0 !important;
        border-radius: 6px;
    }
    .code-toolbar:before {
        content: '';
        height: 40px;
        width: 100%;
        background: #2f3640;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }
    
    .code-toolbar:after {
        content: '';
        position: absolute;
        top: 12px;
        left: 20px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #ff5f56;
        box-shadow: 25px 0 0 #ffbd2e, 50px 0 0 #27c93f;
        z-index: 1;
    }
    
    .toolbar {
        position: absolute;
        top: 6px;
        right: 10px;
        z-index: 2;
        opacity:0;
        transition: opacity 0.3s ease;
    }
      /* 移动端始终显示工具栏 */
    @media (max-width: 768px) {
        .toolbar {
            position: absolute;
            top: 6px;
            right: 10px;
            z-index: 10; /* 提高层级 */
            opacity: 1;
            width: auto; /* 确保宽度自适应 */
            display: block !important; /* 强制显示 */
            pointer-events: auto !important; /* 确保可点击 */
        }
        
        /* 处理短代码包裹的情况 */
        .wp-block-jetpack-markdown .code-toolbar .toolbar {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        /* 确保按钮可见且可点击 */
        .toolbar-item button {
            display: block !important;
            pointer-events: auto !important;
        }
    }
    .toolbar-item button {
    padding: 5px 10px;
    color: #494949;
    cursor: pointer;
    background: #b2bac2;
    border-radius: 3px;
    line-height: 1.4;
    border: 1px solid #dddddd03;
}

优化了复制按钮。