티스토리 블로그에 코드 작성시 사용자 편리를 위한 코드 복사 버튼 추가하는 방법

코드 복사 버튼 추가 방법

티스토리 블로그에서 코드 블록에 복사 버튼을 추가하려면, 먼저 코드 문법 강조 플러그인을 설치합니다. 그런 다음 clipboard.min.js 파일을 스킨 편집에서 HTML 편집을 통해 업로드하고,태그 내에 JavaScript 라이브러리를 로드합니다. 추가로, 코드를 수정하여 복사 버튼을 생성하고 복사 기능을 활성화합니다. 마지막으로, CSS를 통해 복사 버튼의 스타일을 설정합니다. 이 과정을 통해 블로그 방문자들이 코드 블록을 쉽게 복사할 수 있게 됩니다.

티스토리블로그와 사이트에 글을 작성하다 보면 코드에 대한 글을 작성할때가 있습니다. 그때 원본 코드를 입력하는 경우가 있고 그렇게 작성된 코드를 복사해서 사용하는 경우가 있습니다. 글페이지에서 작성된 코드를 쉽게 복사해서 사용할수 있게 코드안에 코드 복사 버튼을 추가하는 방법입니다.

티스토리 블로그를 사용시 블로그 자체에 플러그에서 코드문법강조 플로그인을 설치하시게 되면 코드를 블럭 형태로 사용이 가능하며 그코드블록내에 버튼을 추가하는 간단한 코드입니다. 아래는 코드 복사 버튼을 추가하는 방법입니다.

코드복사 추가방법

우선 플러그인에서 코드 문법강조 설치합니다.

스킨편집 - html편집 - 파일업로드 창을 열어 아래 js파일을 복사해서 파일을 업로드 합니다.

clipboard.min.js

0.01MB

스킨편집 - html편집 - htm l head /head 사이에 입력 아래 코들르 입력해서 clipboard.min.js라이브러리를 로드해줍니다.

<!-- 코드복사 버튼을 위한 jQuery와 ClipboardJS 라이브러리를 로드합니다. -->
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./images/clipboard.min.js"></script>
<!-- 위 라이브러리들은 코드 복사 기능을 구현하기 위해 사용됩니다. -->

<script>
// 코드복사 버튼을 만들고 각 코드 블록(pre 요소)에 추가합니다.
$(document).ready(function () {
    // 모든 코드 블록(pre 요소)에 대해 반복합니다.
    $('pre[id^="code"]').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');
        });
        // 코드 블록(pre 요소)에 버튼을 추가합니다.
        e.appendChild(button);
    });

    // 클립보드JS를 이용하여 복사 버튼을 활성화합니다.
    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', '복사완료!'); // 복사 메시지를 설정합니다.
    });
});
</script>

CSS 란에 입력

아래코드를 CSS란에 입력해서 복사버튼의 CSS를 자신의 취향에 맞게 설정합니다

/* 코드 블록 내부의 복사 버튼 스타일 */
pre {
    position: relative; /* 상대 위치 설정 */
    overflow: visible; /* 넘치는 부분 보이게 함 */
}

/* 복사 버튼 스타일 */
pre .copy-button {
    opacity: 0; /* 처음에는 투명하게 설정 */
    position: absolute; /* 절대 위치 설정 */
    right: 4px; /* 오른쪽 여백 설정 */
    top: 2px; /* 상단 여백 설정 */
    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; /* 마우스를 올렸을 때 투명도 1로 변경 */
}

/* 복사 버튼에 마우스를 올렸을 때 스타일 */
pre .copy-button:hover {
    color: #eee; /* 복사 버튼에 마우스를 올렸을 때 글자 색상 변경 */
    transition: all ease-in-out 0.3s; /* 전체 속성에 대한 전환 효과 설정 */
}

/* 복사 버튼을 클릭했을 때 스타일 */
pre .copy-button:active {
    color: #33f; /* 복사 버튼을 클릭했을 때 글자 색상 변경 */
    transition: all ease-in-out 0.1s; /* 전체 속성에 대한 전환 효과 설정 */
}

/* 복사 성공 메시지 스타일 */
.copy-message:before {
    content: attr(copy-message); /* 복사 메시지 내용 삽입 */
    position: absolute; /* 절대 위치 설정 */
    left: -85px; /* 왼쪽 여백 설정 */
    top: 0px; /* 상단 여백 설정 */
    padding: 2px 6px; /* 내부 여백 설정 */
    color: #fff; /* 글자 색상 설정 */
    background: rgba(0, 0, 0, .6); /* 배경색 설정 */
    border-radius: 5px; /* 모서리를 둥글게 만듦 */
}