본문 바로가기
티스토리 및 각종 생활 정보

티스토리 글쓰기 나만의 코드복사 블럭 삽입하는 방법

by 카이사르000 2023. 6. 13.
반응형

티스토리 글쓰기에서 나만의 코드복사 블럭 삽입방법에 대해 쉽게 설명해드리겠습니다.

1. 아래 스크립트 문서 다운로드

CodeBlockCopy.js
0.00MB
clipboard.min.js
0.01MB

 

2. 블로그관리 꾸미기 스킨편집 클릭

 

 

3. 블로그관리  HTML 편집 클릭

 

4. 파일업로드  클릭후 추가클릭 1.다운로드 파일 두개를 추가

 

5. 다운로드 파일 두개를 추가후 HTML 클릭후 <head> 밑에 코드 복사 붙여넣기

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

 

6. <head> 밑에 코드 복사 붙여넣기후 </body> 위에 밑에 코드 복사 붙여넣기

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

 

7. </body> 위에 밑에 코드 복사 붙여넣기후 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;  
}

7. 모든 작업이 끝났으니 적용하고 새로고침 글쓰기 들어가서 코드블럭 사용하면됩니다.

 

코드블럭 만들기 SAMPLE

 

☆  여기서부터는 자신만의 코드블럭 설정 방법입니다.

1. 탐색기에 들어가서 다운받은 CodeBlockCopy 파일을 메모장으로 불러옵니다.

2. CodeBlockCopy 파일을 메모장으로 불러온후 'COPY'문자에 넣고싶은 문자 수정후 저장.

pre.forEach((snippet) => {
  let button = document.createElement('button');
  button.className = 'copy-btn';
  // button. innerText = 'Copy'; // Text 버튼을 이미지로 변경
  button. innerText = 'copy';
  // (option) 마우스를 Code 블록에 올리면 버튼이 나타나도록 함
  button.addEventListener('mouseleave', clearTooltip);
  button.addEventListener('blur', clearTooltip);

  snippet.appendChild(button);
});

3. CodeBlockCopy 파일 저장후 HTML편집들어가서 파일업로드 다시 추가해야 수정작업이 변환됩니다.

(문자 말고 이미지가 뜨게 하고 싶다면 이 부분 안에 설정을 해주면 된다.)

아래 참고하세요

 

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

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

knowing-passion.tistory.com

 

반응형

'티스토리 및 각종 생활 정보' 카테고리의 다른 글

오픈런하게 만드는 카페 굿즈 4종  (0) 2023.06.14
갑자기 티스토리 접속이 안될경우 해결방법(HTTP ERROR 400오류)  (0) 2023.06.13
콘텐츠 디렉터가 챗GPT로 광고 카피 10분 만에 쓰는 법  (0) 2023.06.11
갓성비 여행! 국내 LCC 항공 꿀팁 총정리  (1) 2023.06.09
외국인에게 물가가 제일 비싼 도시는?  (0) 2023.06.08

관련글

댓글

티스토리툴바