모든 pre 복사버튼 js

모든 pre(워드프레스 wp-block-code 포함)에 복사버튼 넣는 js, hardfilter된 최적화 버전

document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll("pre").forEach(function(block) {
        var code = block.innerText;
        var copyButton = document.createElement("button");
        copyButton.innerText = "Copy";
        copyButton.className = "in-btn";
        block.insertBefore(copyButton, block.firstChild);

        copyButton.addEventListener("click", function() {
            navigator.clipboard.writeText(code);
        });
    });
});

↑ 와 같은 기능인데 텍스트 수 줄이면서 한 번 더 업그레이드 ↓

document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll("pre").forEach(block => {
        let code = block.innerText;
        block.prepend(Object.assign(document.createElement("button"), {
            innerText: "Copy",
            className: "in-btn",
            onclick: () => navigator.clipboard.writeText(code)
        }));
    });
});

in-btn 으로 클래스명을 넣어놨으니 이걸로 CSS 조절하면 됨, 필요 없으면 해당 라인 삭제.

function 대신 화살표함수, 세세한 변수, 이벤트 세팅 대신 필요한 최소한만 세팅해서 똑같은 기능인데 텍스트 용량 줄임.

var 대신 let 사용해 범위를 더 구체적이게 축소해 더 간결하고 중첩오류를 줄임.

전체 pre 가 아니라, .entry-content 안의 pre 만 하고싶다면 "pre" 부분을 바꾸면 끝 e.g. ".entry-content pre"