Cara Memasang Kode Pre Code yang Bisa di Salin atau diCopy otomatis

Ini kode HTML dan Javascript yang Anda harus tambahkan:

<script>
  // Load Clipboard if we haven't already got it.
window.setTimeout(function() {
  if (Clipboard) {
    return;
  }
  var s = document.createElement('script');
  s.src = 'https://cdn.rawgit.com/zenorocha/clipboard.js/v1.6.1/dist/clipboard.min.js';
  document.querySelector('head').appendChild(s);
}, 500);
</script>
<script>
window.setTimeout(function() {
  if (typeof Clipboard === 'undefined' || !Clipboard) {
    return;
  }
  var codes = document.querySelectorAll('code');
  if (!codes || codes.length < 1) return;
  // Load material font.
  var l = document.createElement('link');
  l.rel = 'stylesheet';
  l.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
  document.querySelector('head').appendChild(l);
  // Add copy-to-clipboard links.
  codes
    .forEach(c => {
      var copyLink = document.createElement('div');
      copyLink.setAttribute('class', 'copy');
      copyLink.innerHTML = '&#xE14D;';
      copyLink.title = 
          _WidgetManager._GetAllData().messages.copy || 'Copy';
      c.parentElement.insertBefore(copyLink, c);
      var clipboard = new Clipboard(copyLink, {
        text: function(trigger) {
          return c.innerText;
        }
      });
      clipboard.on('success', e => {
        alert(
            _WidgetManager._GetAllData().messages.copiedToClipboard
                || 'Copied to clipboard');
      });
    });
}, 3000);
</script>
<style>
  pre .copy {
    font-family: 'Material Icons';
    font-size: 24px;
    position: absolute;
    right: 0;
    margin: 8px;
    cursor: pointer;
  }
  pre .copy:not(:hover) {
    opacity: 0.4;
  }
</style>

kemudian tambahkan css untuk membingkai tampilan:

<style>
/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
</style>

Jika anda mengingingkan background pada tampilan <pre> cari pada tema template anda pre , lalu tambahkan kode background. Kodenya:

background-color:#eee

Kode ini untuk setiap kali Anda memposting kode di blog postingan:

<pre class="copy" title="Copy"><code></code></pre>