WP-B2主题自带代码高亮功能增强增加复制按钮，支持隐藏内容

网络上的各种教程都试过了但是总有那么一点点的小问题

以下为本站使用的代码

将以下代码放入主题的child.js文件中，建议使用子主题，方便后续更新

//文章页面高亮代码复制粘贴
window.addEventListener('load', () => {
    // 初始化 ClipboardJS 的基础设置
    function setupCodeToolbarAndClipboard() {
        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 selectAllButton = document.createElement('button');
                selectAllButton.textContent = '全选';
 
                // 创建复制按钮
                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(selectAllButton);
                toolbarItem.appendChild(document.createElement('span')); // 分隔符
                toolbarItem.appendChild(copyButton);
 
                // 添加工具栏到包装器
                toolbar.appendChild(toolbarItem);
                wrapper.appendChild(toolbar);
 
                // 为全选按钮添加事件监听器
                selectAllButton.addEventListener('click', () => {
                    const range = document.createRange();
                    range.selectNodeContents(pre);
                    const selection = window.getSelection();
                    selection.removeAllRanges();
                    selection.addRange(range);
                });
 
                // 初始化 ClipboardJS
                const clipboardCopy = new ClipboardJS(copyButton);
                
                clipboardCopy.on('success', function(e) {
                    e.clearSelection();
                    const trigger = e.trigger;
                    const toolbarItem = trigger.parentElement;
                    const selectAllButton = toolbarItem.querySelector('button:first-of-type');
 
                    // 禁用所有按钮并显示复制成功消息
                    trigger.textContent = '复制成功';
                    trigger.disabled = true;
                    selectAllButton.disabled = true;
 
                    setTimeout(() => {
                        trigger.textContent = '一键复制';
                        trigger.disabled = false;
                        selectAllButton.disabled = false;
                    }, 2000);
                });
            }
        });
    }
 
    // 使用 MutationObserver 监控 DOM 变化
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                Array.from(mutation.addedNodes).forEach(node => {
                    if (node.nodeName === 'PRE' && !node.parentElement.classList.contains('code-toolbar')) {
                        // 创建一个临时的 preElements 集合，仅包含这个新添加的 pre
                        const newPreElements = document.querySelectorAll('pre:not(.processed)');
                        newPreElements.forEach((pre, index) => {
                            // 标记为已处理，避免重复处理
                            pre.classList.add('processed');
 
                            // 在这里重新调用 setupCodeToolbarAndClipboard 的逻辑，但只针对这个新的 pre
                            // 注意：这里我们其实可以优化，只处理新的这个 pre，而不是重新遍历所有 pre
                            // 但为了简单起见，这里还是重新调用整个函数，并依赖 .processed 类来避免重复处理
                            setupCodeToolbarAndClipboard();
                        });
                    }
                });
            }
        });
    });
 
    // 配置观察选项:
    const config = { childList: true, subtree: true };
 
    // 选择需要观察变动的节点
    const targetNode = document.body;
 
    // 启动观察
    observer.observe(targetNode, config);
 
    // 首次加载时立即处理所有已存在的 pre 元素
    setTimeout(setupCodeToolbarAndClipboard, 600);
});
/**add**/
//文章页面高亮代码复制粘贴

将以下代码放入主题的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;
}
/**代码高亮结束**/

需要对以上代码进行细节修改（不修改也可以直接用，不影响使用了）