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

개요

참고사항

• hELLO v.4.2.0을 기준으로 작성되었습니다.
• 코드 블럭 오른쪽 상단에 블럭 내 전체 내용을 복사할 수 있는 버튼을 생성합니다.

티스토리에 코드를 일종의 아카이브 하듯이 저장하는 입장에서 코드 블럭이 버튼 하나로 복사가 되는 기능이 있는지 없는지는 꽤나 중요하게 느껴집니다.

hELLO 스킨에는 코드블럭 복사버튼이 기본적으로는 내장되어 있지 않기 때문에 다른 글을 참조하여 작성해봤습니다.

hELLO 스킨의 다른 기능과의 충돌인지 곧바로 적용되지 않아 어느 정도 수정을 가미했으며,

디자인을 제 취향대로 조금 수정했습니다.

선행작업: clipboard.js 다운로드 (선택)

clipboard 기능을 사용하기 위해 미리 작성된 깃 레포지토리로부터 자바스크립트를 얻어와야 합니다.

해당 스크립트를 다운로드해서 업로드를 할 수도 있고 script src로 입력해 바로 사용할 수도 있어서 선택이 가능하다고 적었습니다.

아무래도 빠른 로딩과 버전 유지 측면에서는 업로드가 / 업로드없이 간편한 관리를 위해서는 src를 사용하는게 편리하겠습니다.

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

위 경로에서 dist - clipboard.min.js를 다운로드 받아 업로드해서 사용하면 됩니다.

이 경우, 자바스크립트 코드에서 경로를 ./images/clipboard.min.js로 해야 한다는 것을 기억해주세요.

코드블럭마다 버튼 생성하기

아래의 코드는 </head> 바로 위에 작성해주세요.

선택사항을 진행하여 clipboard.js 혹은 clipboard.min.js를 다운로드 받으셨다면, 스킨 편집의 파일 업로드에서 업로드 해주시고 해당 파일을 참조하시기 바랍니다.

<script src=".images/clipboard.min.js"/>

예를 들어 위와 같습니다.

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js" integrity="sha512-7O5pXpc0oCRrxk8RUfDYFgn0nO1t+jLuIOQdOMRp4APB7uZ4vSjspzp5y6YDtDs4VzUSTbWzBFZ/LKJhnyFOKw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
  window.addEventListener('load', function () {
    document.querySelectorAll('pre[id^="code"]').forEach(function (e, index) {
      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', '복사완료!');
    });
  });
</script>

참고된 블로그와 다른 점

• document ready가 아닌 window load를 사용했습니다. 스킨 특성인지 ready()가 호출되는 시점에서는 code 태그의 로드가 덜 끝났는지 정상적으로 적용되지 않아 호출 시점이 더 느린 load()를 사용했습니다.
• jQuery가 아닌 native javascript를 사용했습니다.
• cdn을 통해 clipboard.js 라이브러리를 호출했습니다. 유지보수 측면에서 이쪽이 편리하다 생각했습니다.

버튼 스킨 적용하기

아래 코드를 CSS에서 붙여 넣어주세요.

참고 블로그의 스타일과 다른 점은 위치를 조정하고 / padding 사이즈를 키우고 / radius를 조절한 점입니다.

hELLO 스킨의 기본적인 CSS도 있기 때문에 호환을 위해 조절한 부분도 있습니다.

/* pre에 copy button을 추가합니다. */
pre {
  position: relative;
  overflow: visible;
}

pre .copy-button {
  font-family: SUIT, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  opacity: 0;
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 6px 16px;
  color: #fff;
  background: rgba(255, 223, 0, 0.6);
  border-radius: 16px;
  transition: opacity .3s ease-in-out;
  line-height: 100%;
}

pre:hover .copy-button {
  opacity: 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 {
  font-family: SUIT, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  content: attr(copy-message);
  position: absolute;
  left: -100px;
  top: 0px;
  padding: 6px 16px;
  color: #fff;
  background: rgba(255, 223, 0, 0.6);
  border-radius: 16px;
  line-height: 100%;
}

참고

[티스토리] 코드블럭 클립보드로 복사버튼 추가