给B2自带的代码高亮增加一键复制功能【完美解决方案】

众所周知，B2的pre代码被隐藏后就会失去灵魂。这个问题我已经解决了。

2024/08/10更新：受大佬指点，一键复制按钮不再随滚动条移动。

child.js添加代码

// js 复制到剪贴板
function copyToClipboard(content) {
    if (window.clipboardData) {
        window.clipboardData.setData('text', content);
    } else {
        (function (content) {
            document.oncopy = function (e) {
                e.clipboardData.setData('text', content);
                e.preventDefault();
                document.oncopy = null;
            }
        })(content);
        document.execCommand('Copy');
    }
}

//您自己的js代码写到下面

下载single.js替换b2/Assets/fontend/single.js

CSS加入代码（限定最大高数、带滚动条、代码超出自动换行）

/*代码高亮美化开始*/
.prettyprint {
        background: #f3f3f3 !important;
        border-radius:var(--b2radius);
}
.prettyprint ol,.prettyprint ol li{
     background: #f3f3f3 !important;
}
 
  .pln {
    color: #666666!important;
  }
  
  @media screen {
  
    /* string content */
  
    .str {
      color: #ffce54;
    }
  
    /* keyword */
  
    .kwd {
      color: #4fc1e9;
    }
  
    /* comment */
  
    .com {
      color: #aaaaaa!important;
    }
  
    /* type name */
  
    .typ {
      color: #4fc1e9;
    }
  
    /* literal value */
  
    .lit {
      color: #ac92ec;
    }
  
    /* punctuation */
  
    .pun {
      color: #666666!important;
    }
  
    /* lisp open bracket */
  
    .opn {
      color: #e6e9ed;
    }
  
    /* lisp close bracket */
  
    .clo {
      color: #e6e9ed;
    }
  
    /* markup tag name */
  
    .entry-content .tag {
      color: #ed5565;
    }
  
    /* markup attribute name */
  
    .atn {
      color: #a0d468;
    }
  
    /* markup attribute value */
  
    .atv {
      color: #ffce54;
    }
  
    /* declaration */
  
    .dec {
      color: #ac92ec;
    }
  
    /* variable name */
  
    .var {
      color: #e6e9ed;
    }
  
    /* function name */
  
    .fun {
      color: #e6e9ed;
    }
  }
.sticky-button {
    
  position: -webkit-sticky;
    position: sticky;
    top: 0;
  left:100%;
   font-size:16px;
    background: var(--b2color);
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: var(--b2radius);
    cursor: pointer;
}



.entry-content pre {
         min-height:100px;
max-height:300px;
     overflow-y: auto; /* 当内容高度超出元素高度时显示滚动条 */
  overflow-x: auto; /* 隐藏水平滚动条 */
}
.entry-content pre code, .content-show-roles pre code{
    white-space: pre-wrap!important;
}
 /*代码高亮美化结束*/


 

以下是一段隐藏后的演示代码（复制按钮照样显示）