[티스토리 꾸미기] 코드블럭에 복사버튼 만들기!!!

프로그래밍을 하다보면 가장 중요한 것이 웹서핑을 통해 내가 필요한 코드 정보들을 찾는 것입니다. 그럴 때 중요한 것이 바로 코드를 복사하고 붙여넣어 테스트를 해보는 것인데, 만약에 코드를 복사하기가 되지 않는다면 필요한 코드를 한땀한땀 타이핑을 해야하는 불상사가 발생합니다. 이런일이 심심치 않게 많이 발생하고 있습니다.

정작 코드를 올리는 저 역시도 코드블럭이 마우스 드래그가 되지 않게 만들어놨으니, 다른 사람들도 제 블로그에서 코드를 쉽게 가져가지 못하고 있다는 이야깁니다. 그래서 마우스 드래그는 못하더라도 바로 복사하기 버튼을 만들어서 타이핑 없이 가져갈 수 있도록 해보겠습니다. 저처럼 티스토리로 코드를 작성하시는 많은 분들이 복사버튼을 만들기를 바라는 마음으로 시작하겠습니다.

 

1. 가장 중요한 재료 clipboard.min.js 라이브러리 다운로드.

이 라이브러리는 Github에 공개된 자바스트립트 라이브러리입니다.

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

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

 

 

 

먼저 오른쪽 위에 있는 code 버튼을 클릭한 후 하단에 Downloda ZIP을 클릭하여 다운로드 받습니다.

그러면 clipboard-master.zip 파일이 다운로드 될 것입니다.

다운받은 ZIP파일을 해제하면 dist 폴더에 들어있는 clipboard-min.js 파일을 사용하면 됩니다.

 

 

 

2. 티스토리에 라이브러리 적용하기.

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

방법은 어렵지 않습니다. 티스토리를 꾸미기 위해서는 반드시, 그리고 자주 들어갈 수밖에 없는 꾸미기의 스킨편집을 통해 이루어지니 간단하게 진행됩니다.

 

Tistory 관리페이지의 꾸미기 섹션에서 스킨편집을 클릭한 후 html 편집 버튼을 클릭하면 됩니다.

이때, html 편집 버튼을 클릭하면 문제 발생시 직접 수정해야 한다는 살짝 겁을 주지만, 이정도는 무시해줘야죠~^^

확인 버튼을 누르고 진입합니다.

 

 

파일업로드를 클릭한 후 추가 버튼을 눌러 다운로드 받은 clipboard-min.js 파일을 업로드 시켜주면 됩니다.

제일 마지막에 clipboard-min.js 파일이 업로드 된 것을 확인했으면, 다음단계로 갑니다.

 

3. HTML 코드를 수정하여 clipboard-min.js 라이브러리를 사용.

clipboard-min.js 파일을 사용하기 위해 다운로드 받고 티스토리에 업로드까지 시켰으니, 이제는 사용을 할 수 있도록 코드 수정을 해줘야 합니다. 

 

① 업로드한 clipboard-min.js 파일을 사용할 수 있도록 하기 위한 코드 추가입니다.

반드시 </head> 위에 넣어줘야 합니다.

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

 

만약, 이전에 jquery를 사용하여 꾸미기를 진행했었던 적이 있다면, 첫번째 줄은 이미 있을지 모르니 확인하는 것이 중요합니다. 만약에 있다면 두번째 줄만 추가해서 넣으면 됩니다.

 

 

② Copy 버튼을 넣어주고, 버튼을 클릭시 복사가 완료되어 Copy OK!를 나타나게 해서 복사가 완료 되었다는 것을 알려주는 코드 추가입니다. 위의 코드 바로 밑에 붙여주시면 됩니다.

<!--코드블럭에 COPY 버튼 나오도록 하는 시작-->
<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', 'Copy OK!');
	});
});
</script>
<!--코드블럭에 COPY 버튼 나오도록 하는 종료-->

 

4. 버튼을 모양을 위한 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: #4B00FF;
		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;
	}
    /*코드블럭 버튼 설정 종료*/

 

이제 모두 다 됐습니다.

반드시 마지막은 적용!! 입니다. 

적용버튼을 클릭하면 완료입니다.