코드블럭 클립보드 복사 버튼 추가하기

Clipboard.js를 활용하여 코드 블럭에 복사하기 버튼을 추가하고자 한다

 

사이트 설정

티스토리 설정에서 꾸미기 > 스킨 편집을 클릭한다

html 편집 버튼을 클릭해서, html 편집 화면으로 진입한다

HTML 메뉴에서 </head> 앞에 Clipbaord.js CDN 스크립트를 추가한다

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>

</body> 앞에 다음의 코드를 추가한다

<script>
$(document).ready(function () {
    $('pre[id^="code"],[class="bash"]').each(function (index, e) {
        let button = document.createElement('button');
        button.innerText = "Copy";
        button.className = 'copy-button';
        button.style.cursor = 'pointer';
        button.setAttribute('data-clipboard-text', e.innerText);
        button.addEventListener('mouseleave', function(event) {
            event.currentTarget.setAttribute('class', 'copy-button');
            event.currentTarget.removeAttribute('copy-message');
        });
        e.appendChild(button);
    });

    var clipboard = new ClipboardJS('.copy-button');
    clipboard.on('success', function (e) {
        e.clearSelection();
        e.trigger.setAttribute('class', 'copy-button copy-message');
        e.trigger.setAttribute('copy-message', 'Copied!');

        setTimeout(() => {
			$('.copy-button').removeClass('copy-message');
        }, 500);
    });
});
</script>

CSS  메뉴에서 다음의 코드를 추가한다

pre {text-align: start;
    position: relative;
    overflow: visible;
}
pre .copy-button {
    opacity: 0;
    position: absolute;
    right: 2px;
    top: 4px;
    padding: 2px 6px;
    color: #aaa;
    background: rgba(0,0,0,.6);
    border-radius: 5px;
    transition: opacity .3s ease-in-out;
}
pre:hover .copy-button {
	opacity: 1;
}
pre .copy-button:hover {
    color: #eee;
    transition: all ease-in-out 0.3s;
}
pre .copy-button:active {
    color: rgb(69, 128, 206);
    transition: all ease-in-out 0.1s;
}
.copy-message:before {
    content: attr(copy-message);
    position: absolute;
    left: -65px;
    top: 0px;
    padding: 2px 4px;
    color: #fff;
    background: rgba(0,0,0,.6);
    border-radius: 5px;
}

적용 버튼을 클릭하여 저장한다

 

기능 테스트

코드 블럭을 추가하여서, 다음과 같이 복사 버튼이 활성화되는지 확인한다

 

참고

GitHub - zenorocha/clipboard.js: Modern copy to clipboard. No Flash. Just 3kb gzipped