티스토리 코드 복사 버튼 만들기

티스토리 스킨에 코드 복사 버튼을 추가하는 방법은 크게 두 가지 단계(CSS 스타일 지정, JavaScript 기능 구현)로 나뉩니다. 이 코드는 티스토리에서 기본적으로 제공하는 코드 문법 강조(Syntax Highlight) 기능과 잘 호환되도록 설계되었습니다.

CSS 추가 (버튼 스타일 지정)

 

먼저 복사 버튼이 코드 박스 오른쪽 상단에 위치하도록 스타일을 지정해야 합니다.
티스토리 관리자 페이지에서 [스킨 편집] > [html 편집] > [CSS] 탭으로 이동합니다.
맨 아래에 다음 코드를 붙여넣습니다.

 

CSS
/* 코드 복사 버튼 스타일 */
.code-copy-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 5px 10px;
    font-size: 12px;
    color: #fff;
    background-color: #333;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.code-copy-btn:hover {
    opacity: 1.0;
}

.code-copy-btn.copied {
    background-color: #4CAF50;
}

/* 코드 블록 위치 기준 설정 */
pre {
    position: relative;
    overflow: visible;
}

 

JavaScript 추가 (기능 구현)

실제로 버튼을 생성하고 클릭 시 클립보드에 텍스트를 복사하는 로직입니다.
[html 편집] > [HTML] 탭으로 이동합니다.
</body> 태그 바로 직전에 아래 스크립트를 붙여넣습니다.

<script>
    document.querySelectorAll('pre > code').forEach(function (codeBlock) {
        // 1. 복사 버튼 생성
        var button = document.createElement('button');
        button.className = 'code-copy-btn';
        button.type = 'button';
        button.innerText = 'Copy';

        // 2. 버튼 클릭 이벤트 추가
        button.addEventListener('click', function () {
            var code = codeBlock.innerText;

            // 클립보드 복사 실행
            navigator.clipboard.writeText(code).then(function () {
                button.innerText = 'Copied!';
                button.classList.add('copied');

                // 2초 후 원래대로 복구
                setTimeout(function () {
                    button.innerText = 'Copy';
                    button.classList.remove('copied');
                }, 2000);
            }, function (err) {
                console.error('복사 실패:', err);
                button.innerText = 'Error';
            });
        });

        // 3. 버튼을 pre 태그 내부에 삽입
        var pre = codeBlock.parentNode;
        pre.appendChild(button);
    });
</script>

 

이렇게하면 코드 복사 버튼이 생깁니다.