기본적으로 불펌을 방지하기 위해서 티스토리 운영진들과 블로거들은 마우스의 우측버튼을 사용하지 못하도록, 설정하거나 복사가 불가능하도록 기능을 추가합니다. 하지만 간혹 공유하고 싶은 정보 중에서 복사, 붙여넣기가 꼭 필요한 경우가 있습니다. 특히 html이나 css 등에서 사용하는 코드가 그렇습니다.
Tip. 코드블럭 스타일 8가지 비교 및 변경하기
현재 게시글을 통해 티스토리 블로그의 코드블럭에 복사 버튼을 생성하는 방법을 알아보려고 합니다. 해당 방법으로 복사버튼의 스타일을 자신의 입맛대로 변경할 수 있는데요. 여기에 추가로 티스토리에서 제공하는 '코드 문법 강조' 플러그인을 통해 8가지의 세련된 코드 스타일을 만들 수 있어요.
티스토리 코드블럭 스타일 변경하는 방법 및 8가지 스타일 비교하기'코드 문법 강조' 플러그인
1. clipboard.min.js 파일 다운로드 하기
위의 clipboard.min.js 파일을 다운로드합니다. 바이러스 없는 파일이니 걱정안하셔도 됩니다.
2. 블로그 html에 파일 업로드 하기
블로그 관리 > 스킨 편집 > html 편집 > 파일업로드를 통해 다운로드한 clipboard.min.js 파일을 추가하고, 혹시 모르니 적용버튼까지 눌러주세요.
3. HTML에 코드 추가하기
3-1. <head>와 </head>사이에 코드 붙여넣기
아래의 코드를 복사하셔서, <head>와 </head> 사이에 코드를 붙여 넣어 주세요. 저는 찾기 편하기 위해 <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-2. </body> 바로 아래에 코드 추가하기
ctrl+F를 눌러 </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>
적용까지 누르셨다면, html에서 작업은 끝났습니다. 이제 CSS로 넘어가 보죠.
4. CSS에 코드 추가하기
CSS로 넘어오셨다면, 아래 코드를 복사하셔서 붙여 넣으시면 됩니다. 어느 위치든 상관없으나, 저는 편집을 대비해서 위쪽에 추가했습니다.
/* 코드복사 버튼 코드 시작*/
pre {
position: relative;
overflow: visible;
}
pre .copy-button {
opacity: 0;
position: absolute;
right: 5px;
top: 5px;
padding: 6px 18px;
color: rgb(255, 255, 255);
background: rgb(255, 142, 142);
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: rgb(183, 101, 231);
transition: all ease-in-out 0.1s;
}
.copy-message:before {
content: attr(copy-message);
position: absolute;
left: -95px;
top: 0px;
padding: 6px 18px;
color: #fff;
background: rgb(252, 122, 122);
border-radius: 5px;
}
/* 코드복사 버튼 코드 끝 */
붙여넣기가 끝났다면, 적용버튼을 눌러주시면 돼요. 저는 위 코드대로 적용된 상태이니, 제 블로그를 참고하셔서 color나 background, right, top 등과 같은 코드를 수정해 보시면서 자신에게 맞는 스타일로 변경하시는 것을 추천드립니다.
마치며
블로그에 글을 적어가며 계속해서 코드에 대해 공부하고 있습니다. 제가 알아가는 것들을 저의 블로그를 통해 공유하도록 하겠습니다. 혹시나 잘 안되거나, 질문이 있으신 분들은 댓글을 달아주시면 답변해 드리겠습니다. 좋은 블로그 생활들 하시길 바랍니다. 여러 많은 선배 블로그를 통해 배워나가고 있습니다.
참고한 사이트
감사합니다.
'티스토리 블로그' 카테고리의 다른 글
| 티스토리 구글 서치콘솔에 등록하는 방법(쉬움. 추가로 사이트맵, RSS 등록하기) (0) | 2023.09.30 |
|---|---|
| 티스토리 광고 차단 보호 방법(+ 수익과 직결되는 주의사항) (0) | 2023.09.30 |
| 티스토리 코드블럭 스타일 변경 및 비교글(코드 문법 강조 플러그인) (0) | 2023.09.27 |
| 미넴스킨 본문 밑줄 스타일 변경하는 방법 (0) | 2023.09.27 |
| 미넴스킨 본문 링크 스타일 변경하는 방법(+ css 코드 변경 Tip) (0) | 2023.09.26 |
| 티스토리 블로그 네이버에 사이트 등록하는 방법! robot.txt, RSS, 사이트맵 등록 종결 총정리 (0) | 2023.09.26 |
댓글