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}}人
人已打赏
B2美化教程技术教程

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

2025-1-15 16:00:06

B2美化教程技术教程

WordPress网站B2主题美化之圈子顶部添加文字滚动通知

2025-1-15 16:07:06

40 条回复 A文章作者 M管理员
  1. single

    大赞,真不错呀

  2. happy~

    这真是太实用了666

  3. 萌面人

    好实用的功能呢666

  4. 欠迩的太多

    好实用的功能呢点赞

  5. 南瘾浪

    这个办法不错啊666

  6. 半生.

    太实用了 赞赞赞

  7. 修身静心!

    这个功能太实用了!赞!

  8. 香薰恋乆

    好实用的功能 赞赞赞

  9. 别说违心话.

    很专业的分享啊666

  10. 与之二三事

    好实用的分享啊 辛苦了

  11. 微信用户30

    好实用的功能666

  12. 南卉

    太赞了,动手试试

  13. 繁华若梦

    赞!很实用的分享

  14. 尽鹤

    这功能太实用了666

  15. 全是爱%

    太棒了,试试这个功能吧

  16. gfdsd

    太赞了,学习到了知识

  17. 美丽玉兔

    牛逼啊,实用的教程

  18. 浅黛っ

    太实用了,感谢分享666

  19. 亚比~囧囧囧

    太棒了,实用功能666

  20. 桃扇骨

    不错的分享666

  21. hildishness

    太实用了,感谢分享666

  22. Tears°

    太棒了,学习到了新技巧

  23. 休止

    很实用的技巧666

  24. 〖夜神鈅〗

    不错的教程,受益匪浅

  25. Midnight

    太有用了,感谢分享666

  26. 暮倦

    这个功能太实用了666

  27. 晚风撩人

    太赞了,一键复制很实用

  28. Warmheart暖心

    这功能太实用了吧666

  29. 心岛初晴°

    很实用啊666

  30. 困成憨包😴

    牛逼啊,这个代码太实用啦

  31. 橘子海🍊

    这个不错,收藏了666

  32. 浊酒

    赞,真的很实用技巧

  33. 微信用户

    超实用的功能666

  34. 括叶作舟

    太棒了,受益匪浅666

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