티스토리 꾸미기 :: 코드블럭 복사버튼 만들기

728x90

≣ 목차

티스토리 코드 블럭에 복사 버튼이 필요한 이유

1. 편의성

코드를 복사하려고 일일이 드래그할 필요가 없습니다.
특히 어떤 블로그는 드래그가 막혀 있어서 더 불편한데, 복사 버튼 하나만 있으면 원클릭으로 해결됩니다.

2. 실수 방지

드래그로 코드를 복사하다 보면 이런 일이 생깁니다.

코드 중간이 빠짐 불필요한 공백이나 글자가 섞임

복사 버튼은 이런 사소하지만 치명적인 실수를 막아줍니다.

3.시간 절약

한 줄씩 드래그 & 붙여넣기?
👉 복사 버튼 클릭 한 번이면 끝!

사용자가 원하는 코드를 빠르게 가져갈 수 있어 훨씬 효율적입니다.

4. 사용자 경험(UX) 개선

“이 블로그는 코드 복사도 편하네”라는 생각은 곧 재방문으로 이어집니다.
사용자의 만족도가 올라가면, 블로그 체류 시간과 참여도도 자연스럽게 늘어납니다.

코드블럭 복사버튼 만들기

clipboard.min.js 다운로드

아래 파일은 GitHub에 공개된 자바스크립트입니다. 1개의 파일을 다운로드하고 저장 위치를 확인해 줍니다.

Link : GitHub - zenorocha/clipboard.js

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

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

github.com

clipboard.min.js

0.01MB

clipboard.min.js 업로드

html 편집 > 파일업로드 > clipboard.min.js 파일을 선택 후 열기를 눌러 업로드 해줍니다.

HTML 수정

1. HTML 탭을 이동 후 <head> 바로 아래 부분에 코드를 붙여넣기를 해준 후 적용을 눌러줍니다.

<!-- 코드복사 버튼 1 -->
<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>
<!-- 코드복사 버튼 1 끝 -->

2. </body> 바로 윗 부분에 아래 코드를 붙여넣기 해줍니다.

<!-- 코드복사 버튼 2 -->
<script>
$(document).ready(function () {
	$('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');
		});
		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>
<!-- 코드복사 버튼 2 END -->

CSS 수정

CSS 탭으로 이동 후 가장 아랫부분에 코드를 붙여넣기 해줍니다.

pre .copy-button:hover {
	color: #fff; /*마우스 오버 폰트색*/
  -webkit-transition: opacity .3s ease-in-out;
  -o-transition: opacity .3s ease-in-out;
  transition: opacity .3s ease-in-out;
  transform: scale(1.1); /* 버튼 확대 효과 */
}
pre .copy-button:active {
	color: #ff0000; /*클릭 폰트색*/
	transition: all ease-in-out 0.1s; /* 버튼 확대 크기 */
}
.copy-message:before {
	content: attr(copy-message);
	position: absolute;
	left: -75px; /*버튼의 좌측 간격*/
	top: 0px; /*버튼의 상단 간격 변경금지*/
	padding: 5px 10px; /*버튼의 내부 여백*/
	color: #fff; /* 복사완료 폰트색*/
	background: rgba(0,0,0,.9);/*버튼 배경색*/
	border-radius: 50px; /*버튼 테두리 라운드*/
}
/* 코드복사 버튼 END */

systax highlight 플러그인 적용

마지막으로 'syntax highlight' 플러그인을 다시 적용 후 하이라이트 테마를 적용 해줍니다.

2025.08.20 - [일상/티스토리 꾸미기] - 티스토리 꾸미기 :: 줄번호,스크롤,열기 및 닫기 버튼