コピー機能付きスニペットボックス

<div class="d11-01-12-box">
          <div class="d11-01-12-head">
            <span>functions.php</span>
            <button class="d11-01-12-copy" type="button">コピー</button>
          </div>
          <pre class="d11-01-12-code"><code>add_action('init', function() {
  // カスタム処理
});</code></pre>
        </div>

.d11-01-12-box{width:min(300px,100%);border-radius:10px;overflow:hidden;background:#1e2433;box-shadow:0 8px 20px rgba(0,0,0,.2)}
        .d11-01-12-head{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:#151a26;font-size:11px;color:#9aa4bb}
        .d11-01-12-copy{
          padding:5px 12px;border:1px solid rgba(255,255,255,.2);border-radius:6px;
          background:transparent;color:#cbd3e6;font-size:10.5px;cursor:pointer;font-family:inherit;
          transition:background .2s,border-color .2s,color .2s;
        }
        .d11-01-12-copy:hover{border-color:#4a6cf7;color:#fff}
        .d11-01-12-copy.is-done{background:#22b573;border-color:#22b573;color:#fff}
        .d11-01-12-code{margin:0;padding:14px;font-size:11.5px;line-height:1.7;color:#c9d1e8;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-x:auto}

(function(){
        var box = document.querySelector('.d11-01-12-box');
        if(!box)return;
        var btn = box.querySelector('.d11-01-12-copy');
        var code = box.querySelector('.d11-01-12-code');
        var original = btn.textContent;
        btn.addEventListener('click', function(){
          var text = code.textContent;
          function done(){
            btn.textContent = 'コピーしました';
            btn.classList.add('is-done');
            setTimeout(function(){ btn.textContent = original; btn.classList.remove('is-done'); }, 1800);
          }
          if(navigator.clipboard && navigator.clipboard.writeText){
            navigator.clipboard.writeText(text).then(done).catch(done);
          }else{
            var ta = document.createElement('textarea');
            ta.value = text;
            ta.style.position = 'fixed';
            ta.style.opacity = '0';
            document.body.appendChild(ta);
            ta.select();
            try{ document.execCommand('copy'); }catch(e){}
            document.body.removeChild(ta);
            done();
          }
        });
      })();