Tạo hộp mã có nút Sao chép và Chế độ tối

<div id='tstNtf' class='tNtf'></div>
<script>
  /*<![CDATA[*/
  /* Toast */ function toast(e){var tNotif = document.getElementById('tstNtf'); if (tNotif != null && e){tNotif.innerHTML = '<span>' + e + '</span>'}};
  /*]]>*/
</script>

/* Codebox by House Of Blogger */
.cBx{-webkit-tap-highlight-color:transparent;background:#f1f3f4;position:relative;padding-top:30px;border:1px solid #dadce0;border-radius:5px;margin:40px 0}
.cBx pre{display:block;position:relative;font-family:monospace;font-size:13px;line-height:1.6em;hyphens:none;overflow:auto;direction:ltr;white-space:pre;background:transparent;padding:0 15px 15px;margin:0}
.cBx pre::before, .cBx pre::after{display:none}
.cBxT{position:absolute;right:0;top:0;padding:10px 10px 0 0}
.cBxT button{position:relative;background:transparent;outline:none;border:none;cursor:pointer;padding:0;margin:0;width:20px;height:20px;display:inline-flex;justify-content:center;align-items:center}
.cBxT button:not(:last-child){margin-right:10px}
.cBxT button svg{width:20px;height:20px;fill:none!important;stroke:#000 !important;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
body.cDrk .cBxT button .moon, body:not(.cDrk) .cBxT button .sun, .cBx.copied button .copy, .cBx:not(.copied) button .check{display:none}
.cBxT button span{display:block;position:absolute;bottom:calc(20px + 10px);right:-10px;background:#252526;color:#fff;white-space:nowrap;font-size:11px;line-height:1rem;padding:4px 6px;border-radius:3px;opacity:0;visibility:hidden;transition:all .2s ease}
.cBxT button:hover span{opacity:1;visibility:visible;bottom:calc(20px + 20px)}
.cBxT button span::before{content:'';position:absolute;bottom:-3px;right:15px;width:8px;height:8px;background:inherit;border-radius:2px;transform:rotate(45deg)}
.cDrk .cBx{background:#283142;color:#fffdfc}
.cDrk .cBx pre{color:#eceff1}
.cDrk .cBxT button svg{stroke:#fff !important}

<script>
  /*<![CDATA[*/
  /* Codebox by House Of Blogger */
  (() => {
    /* config */
    var config = {
      copyText: 'Copy to Clipboard',
      copiedText: 'Copied to Clipboard',
      lightText: 'Switch to Light',
      darkText: 'Switch to Dark',
      copiedToast: 'Copied to Clipboard!'
    }
    /* main scripts */
    var cBox = document.querySelectorAll(".cBx");
    var dBdy = document.getElementsByTagName('body')[0];
    localStorage.getItem('CODE_MODE') === 'dark' ? dBdy.classList.add('cDrk') : dBdy.classList.remove('cDrk');
    for (var i = 0; i < cBox.length; i++){
      let c = cBox[i];
      c.setAttribute('data-code', i);
      c.insertAdjacentHTML("afterbegin", "<div class='cBxT'><button onclick='codeDark()'><svg class='line sun' viewBox='0 0 24 24'><circle cx='12' cy='12' r='5'></circle><line x1='12' y1='1' x2='12' y2='3'></line><line x1='12' y1='21' x2='12' y2='23'></line><line x1='4.22' y1='4.22' x2='5.64' y2='5.64'></line><line x1='18.36' y1='18.36' x2='19.78' y2='19.78'></line><line x1='1' y1='12' x2='3' y2='12'></line><line x1='21' y1='12' x2='23' y2='12'></line><line x1='4.22' y1='19.78' x2='5.64' y2='18.36'></line><line x1='18.36' y1='5.64' x2='19.78' y2='4.22'></line></svg><svg class='line moon' viewBox='0 0 24 24'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'></path></svg><span class='moon'>" + (config.darkText ? config.darkText : 'Dark Theme') + "</span><span class='sun'>" + (config.lightText ? config.lightText : 'Light Theme') + "</span></button><button onclick='codeCopy(" + i + ")'><svg class='line copy' viewBox='0 0 24 24'><rect x='9' y='9' width='13' height='13' rx='2' ry='2'></rect><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'></path></svg><svg class='line check' viewBox='0 0 24 24'><polyline points='9 11 12 14 22 4'></polyline><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'></path></svg><span class='copy'>" + (config.copyText ? config.copyText : 'Copy') + "</span><span class='check'>" + (config.copiedText ? config.copiedText : 'Copied') + "</span></button></div>");
    }
    window.codeDark = () => {
      localStorage.setItem("CODE_MODE", "dark" === localStorage.getItem("CODE_MODE") ? "light" : "dark");
      localStorage.getItem("CODE_MODE") === "dark" ? dBdy.classList.add("cDrk") : dBdy.classList.remove("cDrk");
    }
    window.codeCopy = (index) => {
      if (index !== undefined) {
        let el = document.querySelector(".cBx[data-code='" + index + "']");
        if (el !== null){
          let pre = el.querySelector('pre');
          if (pre !== null){
            var e = getSelection(),
                t = document.createRange();
            e.removeAllRanges();
            t.selectNodeContents(pre);
            e.addRange(t);
            document.execCommand("copy");
            e.removeAllRanges();
            el.classList.add('copied');
            toast(config.copiedToast ? config.copiedToast : 'Copied to clipboard');
            setTimeout(() => {
              el.classList.remove('copied');
            }, 2000)
          }
        }
      }
    }
  })()
  /*]]>*/
</script>

<div class='cBx'>
  <pre>&lt;!--[ Code Box 1 ]--&gt;</pre>
</div>

<div class='cBx'>
  <pre>&lt;!--[ Code Box 2 ]--&gt;</pre>
</div>

<div class='cBx'>
  <pre>&lt;!--[ Code Box 3 ]--&gt;</pre>
</div>