[티스토리 블로그] 코드블럭 복사버튼 추가하기

 

티스토리 블로그 글중에 코드블럭에서 마우스 드래그로 코드를 긁어서 복사할때가 종종 있습니다. 마우스 드래그 없이 독자가 보다 간편하게 코드를 퍼갈수 있도록 복사버튼을 추가해 보겠습니다.

 

---

 

1.  clipboard.min.js 다운로드

clipboard.min.js.zip

0.00MB

https://github.com/zenorocha/clipboard.js 깃허브에 공개된 자바스크립트 ClipboardJS 라이브러리 입니다. 파일을 다운로드하고 압축을 해제해 줍니다.

 

 

2.  clipboard.min.js 업로드

내 티스토리 블로그에 ClipboardJS 라이브러리를 사용하기 위해 clipboard.min.js 파일을 업로드 해줘야합니다.

 

➊ 티스토리 관리페이지 → 꾸미기 → 스킨편집 클릭
➋ 오른쪽 상단에 위치한 html 편집 버튼 클릭

 

 

➊ 파일 업로드 선택
➋ 추가 버튼 클릭 → 다운로드한 clipboard.min.js 파일 업로드
➌ images/clipboard.min.js 파일 업로드 확인

 

 

3.  HTML 코드 수정

HTML 코드에서는 코드블럭을 찾아서 복사 버튼을 추가해주는 코드와 ClipboardJS 라이브러리로 복사완료했을때 이벤트처리 코드를 추가합니다.

 

➊ HTML 탭 선택

 

</head> 위에 jquery.js 와 clipboard.js 2개의 <script> 코드를 추가해줍니다.

<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>

</head>

 

</body> 코드 위에 <script> 코드를 추가해 줍니다.

<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>

</body>
</html>

 

 

4.  CSS 코드 수정

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;
}
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;
}

 

---

 

References

https://github.com/zenorocha/clipboard.js

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