티스토리 코드 복사하는 버튼 만들기

카테고리 없음 2022. 8. 5. 23:34

728x90

티스토리 스킨 편집하다가 검색 기능이랑 더 보기 기능이 눌리지 않아 티스토리 스킨을 복구하면서 기록을 남긴다.

혹시 모르니 이걸 보는 분들이 있다면 더 많은 기능을 추가하기 전에 보관 버튼을 누르도록 하자.

보관 버튼을 누르자.

admin > 꾸미기 > 스킨 변경 > 맨위에 보관

이제 보관 버튼을 눌러 무슨 일이 생겼어도 다시 돌아올 대비책이 생겼다.

먼저 우리가 사용할 라이브러리는 clipboard.js라는 라이브러리이다.

내가 한 설정

나는 코드칸에 마우스를 올렸을 때(hover), 글씨로 copy라는 문자가 있는 버튼이 나오는 걸로 설정했고, copy버튼을 클릭했을 때, 아래에 복사 완료라는 문구가 나오는 것으로 설정했다.

먼저 사용할 파일을 다운로드 해보자.

https://clipboardjs.com/

1. clipboard.js 다운로드하기

clipboard.min.js

0.01MB

2. CodeBlockCopy.js 다운로드하기

CodeBlockCopy.js

0.00MB

innerText로 "copy"라고 설정해주었다. 문자 말고 이미지가 뜨게 하고 싶다면 이 부분 안에 설정을 해주면 된다.

https://knowing-passion.tistory.com/5#google_vignette

티스토리(Tistory) 코드블럭 복사 버튼, 클립보드 복사 버튼, 적용방법, 적용하기

자바스크립트, 파이썬, HTML5 등등등 코드 관련 블로그를 하다 보면 여기저기 다른 여럿 블로그에 정보를 보면서 기재되어있는 소스를 사용하면서 어떤 블로그는 복사 방지로 인해 아예 막아놨고

knowing-passion.tistory.com

이미지로 설정한 곳은 위에 노잉패션님 블로그에 설명되어 있다.

3. 파일 첨부하기

admin > 꾸미기 > 스킨 편집 > html 편집 > 파일 업로드로 들어간다.

다운로드하였던 clipboard.js와 CodeBlockCopy.js를 추가해준다.

4. HTML 변경하기

추가했던 js파일들을 HTML에 연결해준다.

4-1. 위에 추가

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
</head>

위에 위에 코드를 추가해준다. clipboard.js

4-2. 위에 추가

<script src="./images/CodeBlockCopy.js"></script>
</body>

5. CSS 수정하기

코드가 길어요..!

/*코드블럭 복사버튼 스타일*/ 
pre { position: relative; overflow: visible; display: block; font-family: 'Roboto Mono', monospace !important; 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.8em;  
font-weight: 500;  
letter-spacing: -0.6pt;  
font-family: 'Roboto Mono', monospace !important;  
border-radius: 10px;  
}

@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.2;  
position: absolute;  
background:white;  
border-radius: 20px;  
right: 18px;  
top: 17px;  
color: #81b7ff;  
padding: 4px 8px;  
font-weight: bold;  
cursor: pointer;

}

.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 1px 5px;  
position: relative;  
top: 0px;  
filter: invert();  
}

.copy-btn\[disabled\] .clippy {  
opacity: .3  
}

code\[class_\="language-"\],  
pre\[class_\="language-"\] {  
color: black;  
background: none;  
text-shadow: 0 1px white;  
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;  
text-align: left;  
white-space: pre;  
word-spacing: normal;  
word-break: normal;  
word-wrap: normal;  
line-height: 1.5;  
\-moz-tab-size: 4;  
\-o-tab-size: 4;  
tab-size: 5;  
}

pre\[class_\="language-"\]::-moz-selection,  
pre\[class_\="language-"\]::-moz-selection,  
code\[class_\="language-"\]::-moz-selection,  
code\[class_\="language-"\]::-moz-selection {  
text-shadow: none;  
background: #b3d4fc;  
}

pre\[class_\="language-"\]::selection,  
pre\[class_\="language-"\]::selection,  
code\[class_\="language-"\]::selection,  
code\[class_\="language-"\]::selection {  
text-shadow: none;  
background: #b3d4fc;  
}

@media print {


code[class*="language-"],
pre[class*="language-"] {
    text-shadow: none;
}


}

/_코드블럭 복사버튼 클릭시 텍스트_/  
.tooltipped {  
position: relative;  
background-color: white;  
}

.tooltipped:after {  
position: absolute;  
z-index: 1000000;  
display: none;  
padding: 5px 8px;  
font: normal normal 11px/1.5 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";  
color: #fff;  
text-align: center;  
text-decoration: none;  
text-shadow: none;  
text-transform: none;  
letter-spacing: normal;  
word-wrap: break-word;  
white-space: pre;  
pointer-events: none;  
content: attr(aria-label);


background: rgb(142 89 55 / 80%);
border-radius: 3px;
-webkit-font-smoothing: subpixel-antialiased


}

.tooltipped:before {  
position: absolute;  
z-index: 1000001;  
display: none;  
width: 0;  
height: 0;  
color: rgba(0, 0, 0, .8);  
pointer-events: none;  
content: "";  
border: 5px solid transparent  
}

.tooltipped:hover:before,  
.tooltipped:hover:after,  
.tooltipped:active:before,  
.tooltipped:active:after,  
.tooltipped:focus:before,  
.tooltipped:focus:after {  
display: inline-block;  
text-decoration: none  
}

.tooltipped-multiline:hover:after,  
.tooltipped-multiline:active:after,  
.tooltipped-multiline:focus:after {  
display: table-cell  
}

.tooltipped-s:after,  
.tooltipped-se:after,  
.tooltipped-sw:after {  
top: 100%;  
right: 50%;  
margin-top: 5px  
}

.tooltipped-s:before,  
.tooltipped-se:before,  
.tooltipped-sw:before {  
top: auto;  
right: 50%;  
bottom: -5px;  
margin-right: -5px;  
border-bottom-color: white;  
}

.tooltipped-se:after {  
right: auto;  
left: 50%;  
margin-left: -15px  
}

.tooltipped-sw:after {  
margin-right: -15px  
}

.tooltipped-n:after,  
.tooltipped-ne:after,  
.tooltipped-nw:after {  
right: 50%;  
bottom: 100%;  
margin-bottom: 5px  
}

.tooltipped-n:before,  
.tooltipped-ne:before,  
.tooltipped-nw:before {  
top: -5px;  
right: 50%;  
bottom: auto;  
margin-right: -5px;  
border-top-color: rgba(0, 0, 0, .8)  
}

.tooltipped-ne:after {  
right: auto;  
left: 50%;  
margin-left: -15px  
}

.tooltipped-nw:after {  
margin-right: -15px  
}

.tooltipped-s:after,  
.tooltipped-n::before {  
\-webkit-transform: translateX(50%);  
\-ms-transform: translateX(50%);  
transform: translateX(50%);  
color: #81b7ff;  
background-color: white;

}

.tooltipped-s:after,  
.tooltipped-n:after {  
\-webkit-transform: translateX(50%);  
\-ms-transform: translateX(50%);  
transform: translateX(50%);  
color: #81b7ff;  
background-color: white;

}

.tooltipped-w:after {  
right: 100%;  
bottom: 50%;  
margin-right: 5px;  
\-webkit-transform: translateY(50%);  
\-ms-transform: translateY(50%);  
transform: translateY(50%)  
}

.tooltipped-w:before {  
top: 50%;  
bottom: 50%;  
left: -5px;  
margin-top: -5px;  
border-left-color: rgba(0, 0, 0, .8); background-color: white;  
}

.tooltipped-e:after {  
bottom: 50%;  
left: 100%;  
margin-left: 5px;  
\-webkit-transform: translateY(50%);  
\-ms-transform: translateY(50%);  
transform: translateY(50%); background-color: white;  
}

.tooltipped-e:before {  
top: 50%;  
right: -5px;  
bottom: 50%;  
margin-top: -5px;  
border-right-color: rgba(0, 0, 0, .8);  
background-color: white;  
}

.tooltipped-multiline:after {  
width: -webkit-max-content;  
width: -moz-max-content;  
width: max-content;  
max-width: 250px;  
word-break: break-word;  
word-wrap: normal;  
white-space: pre-line;  
border-collapse: separate; background-color: white;  
}

.tooltipped-multiline.tooltipped-s:after,  
.tooltipped-multiline.tooltipped-n:after {  
right: auto;  
left: 50%;  
\-webkit-transform: translateX(-50%);  
\-ms-transform: translateX(-50%);  
transform: translateX(-50%); background-color: white;  
}

.copy-btn .tooltipped .tooltipped-s{  
background-color: white;  
}

.clippy {  
display: none;  
}

어마어마한 양의 css코드다.. 위는 내가 사용하고 있는 양식의 코드들이다.

위처럼 다 진행했다면 이렇게 나올 것이다.

728x90

ABOUT ME

AgileJung AgileJung

보관 버튼을 누르자.

1. clipboard.js 다운로드하기

2. CodeBlockCopy.js 다운로드하기

3. 파일 첨부하기

4. HTML 변경하기

4-1. 위에 추가

4-2. 위에 추가

5. CSS 수정하기

티스토리툴바

ABOUT ME

보관 버튼을 누르자.

1. clipboard.js 다운로드하기

2. CodeBlockCopy.js 다운로드하기

3. 파일 첨부하기

4. HTML 변경하기

4-1. 위에 추가

4-2. 위에 추가

5. CSS 수정하기

티스토리툴바

2. CodeBlockCopy.js 다운로드하기

3. 파일 첨부하기

5. CSS 수정하기