为Typecho代码块添加一键复制按钮

1
<script>
2
  // 在代码块右上角添加复制按钮
3
  document.addEventListener('DOMContentLoaded', initCodeCopyButton);
4

5
  function initCodeCopyButton() {
6

7
    // 动态注入按钮样式
8
    function initCSS(callback) {
9
      const css = `
10
        .btn-code-copy {
11
          position: absolute;
12
          line-height: .6em;
13
          top: .5em;
14
          right: .8em;
15
          color: rgb(0, 205, 102);
16
          font: menu;
17
        }
18
        .btn-code-copy:hover {
19
          color: rgb(145, 145, 145);
20
          cursor: pointer;
21
        }
22
      `;
23
      const styleId = btoa('btn-code-copy').replace(/[=+\/]/g, '');
24
      const head = document.getElementsByTagName('head')[0];
25
      if (!head.querySelector('#' + styleId)) {
26
        const style = document.createElement('style');
27
        style.id = styleId;
28
        if (style.styleSheet) {
29
          style.styleSheet.cssText = css;
30
        } else {
31
          style.appendChild(document.createTextNode(css));
32
        }
33
        head.appendChild(style);
34
      }
35
      callback();
36
    }
37

38
    // 执行复制操作（兼容旧版浏览器）
39
    function copyTextContent(source) {
40
      let result = false;
41
      const target = document.createElement('pre');
42
      target.style.opacity = '0';
43
      target.textContent = source.textContent;
44
      document.body.appendChild(target);
45
      try {
46
        const range = document.createRange();
47
        range.selectNode(target);
48
        window.getSelection().removeAllRanges();
49
        window.getSelection().addRange(range);
50
        document.execCommand('copy');
51
        window.getSelection().removeAllRanges();
52
        result = true;
53
      } catch (e) {
54
        console.log('copy failed.');
55
      }
56
      document.body.removeChild(target);
57
      return result;
58
    }
59

60
    // 为单个 <pre> 元素添加复制按钮
61
    function initButton(pre) {
62
      const code = pre.querySelector('code');
63
      if (code) {
64
        const preParent = pre.parentElement;
65
        const newPreParent = document.createElement('div');
66
        newPreParent.style = 'position: relative';
67
        preParent.insertBefore(newPreParent, pre);
68
        const copyBtn = document.createElement('div');
69
        copyBtn.innerHTML = '复制代码';
70
        copyBtn.className = 'btn-code-copy';
71
        copyBtn.addEventListener('click', () => {
72
          copyBtn.innerHTML = copyTextContent(code) ? '已复制' : '无法复制';
73
          setTimeout(() => copyBtn.innerHTML = '复制代码', 250);
74
        });
75
        newPreParent.appendChild(copyBtn);
76
        newPreParent.appendChild(pre);
77
      }
78
    }
79

80
    // 查找页面中所有代码块并初始化
81
    const pres = document.querySelectorAll('pre');
82
    if (pres.length !== 0) {
83
      initCSS(() => pres.forEach(pre => initButton(pre)));
84
    }
85
  }
86
</script>

1
initCodeCopyButton();