highlight.jsにコピー機能を追加する方法

let els = document.querySelectorAll(".copy-button");
let active = [];
els.forEach((el) => {
    el.addEventListener("click",(e) => {
        try{
            const doc = el.closest(".docs");
            const pre = doc.querySelector("pre");
            let result = false;
            if(active.indexOf(el) !== -1) return;
            if(pre){
                result = copyToClipboard(pre);
                el.innerText = (result ? "COPIED!" : "FAILED!");
                el.classList.add((result ? "success" : "failed"));
                active.push(el);
                setTimeout(() => {
                    let index =  active.indexOf(el);
                    el.className = "copy-button";
                    el.innerText = "COPY CODE";
                    if(index !== -1)active.splice(index, 1);
                },2000);
            }
        } catch (e) {
            //error 
        }
    });
});

/*
 * これは変更ありません｡
*/
let copyToClipboard = (element) => {
    let ranges = [];
    let selection = window.getSelection();
    let range = document.createRange();
    let result = false;
    for(let i = 0; i < selection.rangeCount; i += 1) {
        ranges[i] = selection.getRangeAt(i);
    }
    range.selectNodeContents(element);
    selection.removeAllRanges();
    selection.addRange(range);
    result = document.execCommand("copy");
    selection.removeAllRanges();
    for(let i = 0; i < ranges.length; i += 1) {
        selection.addRange(ranges[i]);
    }
    return result;
};
/* ボタン位置が異なるため､少し手直し! bodyからイベントを拾うように変更*/
let body = document.querySelector("body");
let active = [];
body.addEventListener("click",(e) => {
    try{
        const target = e.target;
        if(!target.classList.contains('copy-button'))return;
        
        const pre = target.closest("pre");
        let result = false;
        if(active.indexOf(target) !== -1) return;
        if(pre){
            result = copyToClipboard(pre);
            target.innerText = (result ? "COPIED!" : "FAILED!");
            target.classList.add((result ? "success" : "failed"));
            active.push(target);
            setTimeout(() => {
                let index =  active.indexOf(target);
                target.className = "copy-button";
                target.innerText = "COPY CODE";
                if(index !== -1)active.splice(index, 1);
            },2000);
        }
    } catch (e) {
        //error 
    }
});
/* highlightを拡張しコードブロックに自動的にボタンを追加する */
hljs.addPlugin({
    'after:highlightElement': ({ el, result }) => {
      el.innerHTML = `<button class="copy-button">COPY CODE</button>${result.value}`;
    }
});

pre{
    position:relative;
}
.copy-button{
    color:#888;
    font-size:.6rem;
    display:inline-block;
    padding:8px 16px;
    margin-right:20px;
    box-shadow:0px 2px 5px 0px rgba(0,0,0,0.16), 0px 2px 6px 0px rgba(0,0,0,0.12);
    border:2px solid #666;
    cursor: pointer;
    background-color: #fff;
    transition: all .2s ease;
    position:absolute;
    right:0;
    top:-20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.copy-button.success{border-color:#00C851;background-color:#c8e6c9;color:#007E33;}
.copy-button.failed{border-color:#ff4444;background-color:#ffcdd2;color:#CC0000;}
.copy-button:hover{
    box-shadow:0px 2px 5px 0px rgba(0,0,0,0.3), 0px 2px 10px 0px rgba(0,0,0,0.12);
}