WordPress网站B2主题美化之代码高亮+一键复制

WordPress网站B2主题美化之代码高亮+一键复制  

 

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

(原文转载自https://thax.cn/5834.html,感谢站长分享)

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

 

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

/**代码高亮-https://www.xcbtmw.com/26354.html**/
.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;
}
/**代码高亮-https://www.xcbtmw.com/26354.html**/

给TA打赏
共{{data.count}}人
人已打赏
网络教程

通用WordPress美化通知弹窗-B2主题可用

2025-7-1 19:25:03

网络教程

WordPress网站B2主题美化之文章彩色角标

2025-7-1 19:14:44

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索