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

1. 코드블럭에 Copy 버튼 만들기

 

2. 라이브러리 파일 다운로드

다운 받은 clipboard.min.js 파일의 압축을 풀어줍니다.

clipboard.min.js.zip

0.00MB

 

3. 라이브러리 파일 업로드

티스토리 관리페이지 - 꾸미기 - 스킨편집 클릭합니다.

오른쪽 상단에 위치한 html 편집 버튼 클릭합니다.

 

1. 오른쪽 상단에 위치한 파일업로드 버튼 클릭합니다.

2. 좌측 하단에 + 추가 버튼 클릭합니다.

3. clipboard.min.js 파일의 업로드 상태를 확인합니다.

 

4. HTML

1. 먼저 Ctrl + F 버튼을 눌러 </head> 단어를 검색합니다.

 

2. 아래 코드블럭 복사 버튼 코드를 복사하여 </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>

 

3. 마찬가지로 Ctrl + F 버튼을 눌러 </body> 단어를 검색합니다.

 

4. 아래 코드블럭 복사 버튼 코드 복사하여 </body> 태그 위에 삽입해줍니다.

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

 

 

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

 

붙여 넣기 예시

 

이제 코드 블록을 생성했을때, COPY 버튼이 생성된것을 확인할 수 있습니다.

 

 

---

참조사이트 : https://jh-make.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EC%BD%94%EB%93%9C%EB%B8%94%EB%9F%AD-%EB%B3%B5%EC%82%AC%EB%B2%84%ED%8A%BC-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0?category=1049802

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