[티스토리] hELLO 스킨에 코드 블럭 복사 버튼 추가하기

현재 블로그 스킨으로 `hELLO` 스킨을 사용하고 있다. 개인적으로 티스토리 스킨 중 완성도가 가장 높다고 생각한다. 이 스킨은 다크 모드를 완벽히 지원하며 디자인이 너무 미니멀해서 보는 순간 이 스킨을 이용하여 블로그를 만들어야겠다는 생각을 했다. 제작자 분이 개발자라서 그런지 코드 블럭에 `highlight.js`가 이미 적용되어 있는 점도 맘에 들었다.

`highlight.js`는 웹에서 코드 구문을 강조해주는 강력한 JavaScript 라이브러리로, 다양한 언어의 코드를 시각적으로 보기 좋게 만들어준다. 하지만 아쉽게도 hELLO 스킨의 기본 코드 블럭에는 코드를 간편하게 복사할 수 있는 기능이 없어 코드 복사가 필요한 방문자에게는 다소 불편함이 있었다. 이 글에서는 hELLO 스킨의 코드 블럭에 코드 복사 버튼을 추가하여 방문자가 더욱 편리하게 코드를 이용할 수 있도록 하는 방법을 소개한다.

GitHub - pronist/hello: 😎 당신의 블로그를 위한 최고의 티스토리 스킨

 

---

 

시작하기 전에: 플러그인 설정 확인

가장 중요한 주의사항이 하나 있다. 티스토리 블로그 설정의 플러그인 메뉴에서 `Syntax Highlight` 플러그인이 활성화되어 있다면 반드시 비활성화해야 한다. `highlight.js`와 충돌하여 제대로 적용되지 않을 수 있기 때문이다. 이 방법은 hELLO 스킨에 기본적으로 포함된 `highlight.js`와 `Font Awesome`을 활용한다. 만약 다른 스킨을 사용 중이거나 해당 라이브러리가 포함되어 있지 않다면, 해당 라이브러리들을 먼저 추가해야 정상적으로 작동한다.

반드시 syntax highlight 플러그인 적용을 해제해야 한다.

 

---

 

코드 추가하기: HTML (스킨 편집)

티스토리 블로그 관리 페이지에서 스킨 편집 메뉴로 이동한다. `HTML` 탭을 선택한 후 `</body>` 태그 바로 위에 아래 JavaScript 코드를 추가한다. hELLO 스킨은 렌더링 방식 차이로 인해 `DOMContentLoaded` 이벤트나 `load` 이벤트를 사용하여 실행 시점을 보장해야 정상적으로 동작한다. 이 코드는 DOMContentLoaded 이벤트를 사용하여 DOM 로드가 완료된 후 실행되도록 작성되었다. 이 JavaScript 코드를 추가하면 코드 블럭의 헤더 영역이 생성되며, 왼쪽에는 해당 코드의 종류(`data-ke-language` 속성 값)가 표시되고 오른쪽에는 복사하기 버튼이 나타난다. 복사하기 버튼은 Font Awesome 아이콘을 사용한다.

<script defer>
    document.addEventListener("DOMContentLoaded", function () {

        // 코드 블록 복사 버튼
        let codeNodes = document.querySelectorAll('pre code');
        codeNodes.forEach(node => {
            // 'code' 태그의 부모 노드 (대부분 'pre' 태그)
            let preNode = node.parentNode;

            // data-ke-language 속성 값 가져오기
            let language = preNode.dataset.keLanguage;

            // 헤더 영역 생성
            let headerDiv = document.createElement("div");
            headerDiv.className = "code-header";

            // 언어 종류 표시
            let languageSpan = document.createElement("span");
            languageSpan.className = "code-language";
            if (language) {
                languageSpan.textContent = language;
            }

            // 복사 버튼 생성
            let button = document.createElement("button");
            button.className = "copy-button";
            button.innerHTML = '<i class="fa-regular fa-copy"></i>'

            headerDiv.appendChild(languageSpan);
            headerDiv.appendChild(button);

            // pre 태그의 첫 번째 자식으로 헤더 추가
            preNode.prepend(headerDiv);

            // 복사 기능 추가
            button.addEventListener("click", function () {
                let text = node.innerText;
                
                // 텍스트에서 불필요한 이중 줄바꿈을 단일 줄바꿈으로 변경
                let processedText = text.replace(/\n\s*\n/g, '\n').trim();
                navigator.clipboard.writeText(processedText).then(function () {
                    button.innerHTML = '<span class="copy-button-text">copied!</span> <i class="fas fa-check copy-success"></i>';
                    setTimeout(function () {
                        button.innerHTML = '<i class="fa-regular fa-copy"></i>';
                    }, 2000);
                }, function (err) {
                    console.error('복사 실패: ', err);
                });
            });
        });
    }
    );
</script>

 

---

 

스타일 추가하기: CSS (스킨 편집)

다음으로, `CSS` 탭을 선택하여 아래 CSS 코드를 추가한다.

pre {
  position: relative;
}

.code-header {
    padding: 8px 15px;
    border-radius: 0.375rem;
    background-color: rgb(244 244 246);
    margin-bottom: 0.15em;
}

.dark .code-header {
  background-color: rgb(41 42 45);
}

.code-language {
    color: rgb(100, 100, 100);
    font-size: 0.8em;
}

.copy-button {
  position: absolute;
  top: 10px;
  right: 15px;
  background-color: rgba(0,0,0,0);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.copy-button i {
  color: rgb(100, 100, 100); /* 아이콘 색상 */
  font-size: 1.0em; /* 아이콘 크기 */
}

.dark .copy-button i {
  color: rgb(150, 150, 150); /* 아이콘 색상 */
}

.copy-success {
  color: green !important; /* 복사 성공 시 체크 아이콘 색상 */
}

.copy-button-text {
  font-size: 0.8em; /* 예시: 버튼 기본 폰트 크기에서 80%로 줄임 */
  color: rgb(100, 100, 100);
}

.dark .copy-button-text {
  color: rgb(150, 150, 150);
}

 

---

 

마무리

이제 hELLO 스킨의 코드 블럭에 복사 버튼이 성공적으로 추가되었다. 이 기능을 통해 방문자들이 코드 스니펫을 더욱 편리하게 활용할 수 있을 것이다.