WordPress网站7B2主题美化代码高亮一键复制-渡漳网

WordPress网站7B2主题美化代码高亮一键复制。相信众多使用7B2主题网站的兄弟都会用到代码高亮功能，于是我就把代码分享出来。

第一种

7B2主题美化代码高亮一键复制插图 — WordPress网站7B2主题美化代码高亮一键复制

给child.js文件添加以下代码

//文章页面高亮代码复制粘贴-https://www.dzcrv.com/file/72866.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 = '#0066ff';
            
            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.dzcrv.com/file/72866.html

给style.css文件添加一键复制美化代码

/**代码高亮开始-https://www.dzcrv.com/file/72866.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: #26b6fb;
    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.dzcrv.com

第二种

7B2主题美化代码高亮一键复制插图1 — WordPress网站7B2主题美化代码高亮一键复制

给child.js文件添加以下代码

//文章页面高亮代码复制粘贴-https:/www.dzcrv.com
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);
});
//文章页面高亮代码复制粘贴-https://www.dzcrv.com

给style.css文件添加一键复制美化代码

/**代码高亮开始-https://www.dzcrv.com**/
.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;
}
/**代码高亮结束-https://www.dzcrv.com

第三种

7B2主题美化代码高亮一键复制插图2 — WordPress网站7B2主题美化代码高亮一键复制

放在你的css文件里面只要能加载就可以比如style.css

/*为pre区域添加一键复制-www.dzcrv.com*/
i.yellow-i {
content: '';
position: absolute;
top: 0;
left: 25px;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 15px 25px;
background: #fdbc40;
z-index: 1;
}
i.green-i {
content: '';
position: absolute;
top: 0;
left: 50px;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 15px 25px;
background: #35cd4b;
z-index: 1;
}i.red-i {
content: '';
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
border-radius: 50%;
background: #fc625d;
margin: 15px 25px;
z-index: 1;
}.entry-content pre {
position: relative;
border-radius: 6px;
padding-top: 50px;
box-shadow: 0px 8px 20px -10px #000;
}/* 代码块容器样式，用于包装代码块和按钮 */
.code-container {
    position: relative;
}
/* 复制按钮样式 */
.copy-button {
    background-color: #00000000;
    color: #fff;
    border: none;
    padding: 10px 20px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

JavaScript代码部分

// 为每个代码块添加复制按钮-www.dzcrv.com
document.querySelectorAll('pre').forEach(function (codeBlock) {
    var redi = document.createElement('i');
    redi.className = 'red-i';
    var yellowi = document.createElement('i');
    yellowi.className = 'yellow-i';
    var greeni = document.createElement('i');
    greeni.className = 'green-i';
    var copyButton = document.createElement('button');
    copyButton.className = 'copy-button';
    copyButton.innerHTML= '<svg t="1692961697703" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10558" width="16" height="16"><path d="M691.712 152.576c59.392 0 108.032 48.64 108.032 108.032v646.656c0 59.392-48.64 108.032-108.032 108.032H188.416c-59.392 0-108.032-48.64-108.032-108.032V260.608c0-59.392 48.64-108.032 108.032-108.032h503.296zM188.416 943.104H691.2c19.968 0 35.84-15.872 35.84-35.84V260.608c0-19.968-15.872-35.84-35.84-35.84H188.416c-19.968 0-35.84 15.872-35.84 35.84v646.656c0 19.968 16.384 35.84 35.84 35.84zM835.584 9.216c59.392 0 108.032 48.64 108.032 108.032v682.496c0 19.968-15.872 35.84-35.84 35.84s-35.84-15.872-35.84-35.84V116.736c0-19.968-15.872-35.84-35.84-35.84H296.448c-19.968 0-35.84-15.872-35.84-35.84s15.872-35.84 35.84-35.84h539.136zM547.84 727.552c19.968 0 35.84 15.872 35.84 35.84s-15.872 35.84-35.84 35.84H260.608c-19.968 0-35.84-15.872-35.84-35.84s15.872-35.84 35.84-35.84H547.84z m72.192-179.712c19.968 0 35.84 15.872 35.84 35.84s-15.872 35.84-35.84 35.84H260.608c-19.968 0-35.84-15.872-35.84-35.84s15.872-35.84 35.84-35.84h359.424z m0-179.712c19.968 0 35.84 15.872 35.84 35.84s-15.872 35.84-35.84 35.84H260.608c-19.968 0-35.84-15.872-35.84-35.84s15.872-35.84 35.84-35.84h359.424z" fill="#bfbfbf" p-id="10559"></path></svg>';
    // 创建包装容器
    var container = document.createElement('div');
    container.className = 'code-container';
    // 将复制按钮和代码块移入容器
    container.appendChild(redi);
    container.appendChild(yellowi);
    container.appendChild(greeni);
    container.appendChild(copyButton);
    codeBlock.parentNode.replaceChild(container, codeBlock);
    container.appendChild(codeBlock);
    copyButton.addEventListener('click', function () {
        // 复制代码逻辑
        var codeToCopy = codeBlock.innerText;
        // 执行复制操作
        navigator.clipboard.writeText(codeToCopy).then(function () {
            // 复制成功后的处理
            copyButton.innerHTML = '<svg t="1692961288647" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5210" width="16" height="16"><path d="M678.1 256.5H242.9c-35.3 0-64 28.7-64 64v486.4c0 35.3 28.7 64 64 64h435.2c35.3 0 64-28.7 64-64V320.5c0-35.3-28.7-64-64-64z m12.8 550.4c0 7-5.8 12.8-12.8 12.8H242.9c-7.1 0-12.8-5.7-12.8-12.8V320.5c0-7.1 5.7-12.8 12.8-12.8h435.2c7.1 0 12.8 5.7 12.8 12.8v486.4z m0 0" p-id="5211" fill="#bfbfbf"></path><path d="M780.5 154.1H345.3c-14.1 0-25.6 11.5-25.6 25.6 0 14.1 11.5 25.6 25.6 25.6h435.2c7.1 0 12.8 5.7 12.8 12.8v486.4c0 14.1 11.5 25.6 25.6 25.6 14.1 0 25.6-11.5 25.6-25.6V218.1c0-35.3-28.7-64-64-64z m0 0" p-id="5212" fill="#bfbfbf"></path><path d="M626.2 457.2c10.8 10.7 10.8 28 0 38.7L447.7 673.2c-21.5 21.4-56.4 21.4-77.9 0l-73.4-72.9c-10.8-10.7-10.8-28 0-38.7 10.8-10.7 28.2-10.7 38.9 0l73.4 72.9 178.5-177.3c10.8-10.7 28.2-10.7 39 0z" p-id="5213" fill="#bfbfbf"></path></svg>';
            setTimeout(function () {
                copyButton.innerHTML = '<svg t="1692961697703" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10558" width="16" height="16"><path d="M691.712 152.576c59.392 0 108.032 48.64 108.032 108.032v646.656c0 59.392-48.64 108.032-108.032 108.032H188.416c-59.392 0-108.032-48.64-108.032-108.032V260.608c0-59.392 48.64-108.032 108.032-108.032h503.296zM188.416 943.104H691.2c19.968 0 35.84-15.872 35.84-35.84V260.608c0-19.968-15.872-35.84-35.84-35.84H188.416c-19.968 0-35.84 15.872-35.84 35.84v646.656c0 19.968 16.384 35.84 35.84 35.84zM835.584 9.216c59.392 0 108.032 48.64 108.032 108.032v682.496c0 19.968-15.872 35.84-35.84 35.84s-35.84-15.872-35.84-35.84V116.736c0-19.968-15.872-35.84-35.84-35.84H296.448c-19.968 0-35.84-15.872-35.84-35.84s15.872-35.84 35.84-35.84h539.136zM547.84 727.552c19.968 0 35.84 15.872 35.84 35.84s-15.872 35.84-35.84 35.84H260.608c-19.968 0-35.84-15.872-35.84-35.84s15.872-35.84 35.84-35.84H547.84z m72.192-179.712c19.968 0 35.84 15.872 35.84 35.84s-15.872 35.84-35.84 35.84H260.608c-19.968 0-35.84-15.872-35.84-35.84s15.872-35.84 35.84-35.84h359.424z m0-179.712c19.968 0 35.84 15.872 35.84 35.84s-15.872 35.84-35.84 35.84H260.608c-19.968 0-35.84-15.872-35.84-35.84s15.872-35.84 35.84-35.84h359.424z" fill="#bfbfbf" p-id="10559"></path></svg>';
            }, 2000); // 2秒后恢复按钮文本
        }).catch(function (err) {
            // 复制失败处理
            console.error('Copy failed: ', err);
        });
    });
});

{{userData.name}}已认证

第一种

第二种

第三种

优惠活动

配件商城

在线工单

建议提交

{{userData.name}}已认证

此组别内的文章

需要支持？

7B2主题美化代码高亮一键复制

第一种

第二种

第三种

优惠活动

配件商城

在线工单

建议提交