티스토리 코드블럭 복사버튼 만들기
티스토리 코드블럭에 복사버튼을 추가해서 클립보드로 바로 복사가 가능하도록 하는 방법을 알아보겠습니다.
티스토리 블로그를 꾸미다 보면 방문자가 포스팅 내용을 도용하지 못하도록 플러그인에서 복사금지/마우스 우클릭 사용금지 설정을 해두는데, 코드정보를 포스팅할 때는 복사금지를 설정해 두어서 코드복사가 불가능해서 난감한 상황이 생깁니다. 이때 복사버튼을 만들어두면 마우스 우클릭 사용금지에서도 코드는 복사가 가능해서 유용합니다.
티스토리 코드블럭 복사버튼 만들기
1. syntax highlight 플러그인 해제
코드 문범 강조를 위한 플러그인인데 코드를 수정할 때 플러그인이 적용되어 있으면 오류가 발생하기도 하니 코드 수정전에 플러그인을 해제해 줍니다.
블로그관리 홈에 들어가서 플러그인 클릭 후 아래 코드 문법 강조 플러그인을 해제합니다.
나중에 다시 설정해 줄 것 이기 때문에 해제 후 코드 적용부터 합니다. 다시 적용해서 하이라이트(테마)를 바꿔주시면 됩니다.
티스토리 코드블럭 복사버튼 만들기
2. 자바스크립트 업로드
위 첨부된 자바스크립트 파일을 전부 다운로드하셔서 '꾸미기> 스킨편집> HTML편집> 파일업로드'로 들어가서 추가합니다.
티스토리 코드블럭 복사버튼 만들기
3. 자바스크립트 작성
파일 업로드 후 clipboard.js를 HTML에 넣어줍니다.
파일업로드 후 HTML을 클릭하고 아래 코드를 <head> 바로 아래 넣어줍니다.
<!--코드블럭 복사 버튼1 -->
<script src="./images/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="./images/clipboard.min.js"></script>
<!--코드블럭 복사 버튼1 끝-->
티스토리 코드블럭 복사버튼 만들기
4. 복사버튼 만들기
코드복사 우측상단에 복사버튼을 이미지를 넣어줍니다.
버튼이미지를 다운로드해서 파일업로드에 추가해 주시면 됩니다.
CodeBlockCopy.js 파일 수정
아래 CodeBlokCopy.js 파일을 다운로드합니다.
위 파일을 업로드한 버튼 이미지와 연결을 해주어야 하기 때문에 수정을 해야 합니다.
수정은 파일에 마우스 우클릭 후 연결프로그램에서 '메모장'을 클릭해서 메모장으로 열어줍니다.
메모장에서 열어서 수정은 숫자 35로 되어 있는 곳은 버튼의 가로크기를 말합니다. 원하시는 사이즈로 수정하시면 되고 업로드한 복사버튼 이미지 링크 주소를 버튼 이미지 주소자리에 붙여 넣습니다.
파일업로드에서 버튼이미지를 찾아서 우클릭 후 링크 주소 복사하시면 됩니다.
수정된 CodeBlockCopy.js 파일을 다시 파일업로드에 추가해 주시면 됩니다.
복사버튼 CSS 적용
마지막으로 CSS코드만 적용하면 코드블럭에 복사버튼 만들기가 마무리됩니다.
HTML에서 아래 코드를 <body>와 </body> 사이에 추가합니다.
<!--코드블럭 복사 버튼2-->
<script src="./images/CodeBlockCopy.js"></script>
<!--코드블럭 복사 버튼2 끝-->
HTML 최하단으로 내려서 </body> 바로 위에 넣어주시면 됩니다.
스크롤을 내릴 때는 키보드의 PgDn 또는 Ctrl+End 키를 활용하시면 빠르게 이동 가능합니다.
티스토리 코드블럭 복사버튼 만들기
5. CSS 스타일 적용
버튼 생성까지 마무리가 되었으면 CSS 코드를 추가하여 사용자 스타일을 만들면 모든 작업이 끝이 납니다.
아래 코드를 복사하여 CSS 맨 아래 붙여 넣기 하시면 됩니다.
/* 코드블럭 복사버튼 스타일 */
pre {
position: relative;
overflow: visible;
display: block;
font-family: monospace;
line-height: normal;
padding-left: 0px;
padding-right: 0px;
white-space: nowrap;
margin-top: 0px;
margin-bottom: 20px;
}
pre code {
line-height: 23px; /* 글 상하간격 */
margin: 0;
font-size: 0.6em;
letter-spacing: -0.6pt;
font-family: "menlo";
border-radius: 0px;
}
@media (min-width:992px) {
pre code {
font-size: 0.9em;
}
}
/*코드블럭 버튼 애니메이션*/
@keyframes copy-btn-ani {
25% {
transform: rotate(0deg) scale(1.05);
}
50% {
transform: rotate(0deg) scale(1);
}
75% {
transform: rotate(0deg) scale(1.05);
}
}
.dark-mode pre .copy-btn {
background: #1a1a1a9c;
}
pre .copy-btn {
-webkit-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
opacity: 0;
position: absolute;
background: #333842; /* 카피버튼 색상 */
border: 1px solid #676767; /* 카피버튼 태두리 색상 */
border-radius: 5px 5px 5px 5px;
right: 15px; /* 버튼 우측 여백 */
top: 6px; /* 버튼 높이 위치 */
}
.copy-btn:hover {
animation: copy-btn-ani 0.8s linear 1;
}
pre:hover .copy-btn,
pre .copy-btn:focus {
opacity: 1;
}
.clippy {
margin: 5px 5px 5px 5px; /* 카피버튼 내부 여백 */
position: relative;
top: 0px;
filter: invert();
}
.copy-btn[disabled] .clippy {
opacity: .3
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* 코드블럭 복사버튼 스타일 끝 */
위 코드는 수정 없이 사용하셔도 무방합니다. 원하는 색상으로 수정하거나 크기나 위치조정이 가능하니 주석 보시고 수정하시면 됩니다.
티스토리 코드블럭 복사버튼 만들기
6. 마무리
코드버튼과 스타일까지 완료되었으면 처음에 해제했던 syntax highlight 플러그인을 적용해 주시면 됩니다.
검은색 배경으로 코드블럭을 만드실 거면 테마는 Atom one Dark / Monokai / Darcula 테마를 고르시면 됩니다.
위 방법 외에도 다양한 버튼을 적용할 수 있으니 원하시는 방법대로 수정하셔서 활용하시기 바랍니다.
'티스토리 > 티스토리 관리 팁' 카테고리의 다른 글
| 티스토리 썸네일 정사각형 설정 방법 (0) | 2023.12.24 |
|---|---|
| 티스토리 코드블럭 꾸미기 (열림, 닫힘, 줄바꿈, 스크롤) (0) | 2023.12.21 |
| 티스토리 이미지 지연로드 설정방법 (0) | 2023.12.14 |
| 티스토리 상단 스크롤 : 프로그래스 바 만들기 (0) | 2023.12.11 |
| 티스토리 개인정보 처리방침 URL 설정 방법 (애드센스 GDPR) (0) | 2023.12.03 |
