网络上的各种教程都试过了但是总有那么一点点的小问题
以下为本站使用的代码
将以下代码放入主题的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;
}
/**代码高亮结束**/需要对以上代码进行细节修改（不修改也可以直接用，不影响使用了）
[content_hide]
z-index: 10; /* 提高层级 */改为5不然移动端的复制按钮会在导航栏上面
其他修改以后有时间再慢慢研究
[/content_hide]
THE END