티스토리 | 코드블럭 한번에 꾸미기 part 1(복사 버튼, 하이라이트)

코드블럭 한 번에 꾸미기 #1

이번에는 코드블럭에 복사 버튼, 하이라이트, 줄번호, 세로 스크롤바, 열기 및 닫기 버튼, 폰트 중

'복사 버튼 및 하이라이트' 를 적용하는 법을 알아보겠습니다.

아래 코드들은 제가 블로그를 시작하고 글을 하나 둘 올리며 제가 적용 한 코드를 공유하려 하니 코드블럭이 너무 민민한 듯해서 코드블럭을 꾸며보려 CSS나 HTML, Class 등 을 1도 모르는 제가 여기저기 여러 블로그들을 들락 거리며 모은 코드입니다.

- highlight.js 등 테마 사이트에서 따로 테마를 다운로드하고 설치하고 하는 건 너무 복잡해서, 플러그인의 'syntax highlight 테마'를 그대로 사용하도록 하겠습니다.

- '마우스 오른쪽 클릭 금지' 플러그인도 그대로 사용합니다.

하나하나 적용하다 보면 아래와 같은 코드블럭이 완성되니 천천히 따라 해 보시기 바랍니다.

코드블럭에 마우스를 올리면 복사버튼이 코드블럭 안에 나타나고 버튼을 클릭하면 클립보드로 복사가 되는 스크립트입니다.

많은 분들이 콘텐츠를 무단으로 복사할 수 없도록 '마우스 오른쪽 클릭 금지' 플러그인을 사용합니다.

하지만 코드를 블로그에 올려두고 복사를 막아둔다면, 코드가 필요해서 블로그를 찾아온 분들이 코드를 가져갈 수 없는 난감한 상황이 발생합니다.

그렇기에 Copy & Paste 버튼이 거의 필수적으로 필요하죠. 코드 블록의 오른쪽 상단에 복사 버튼을 추가해서 사용자가 직접 드래그 복사하지 않고 편리하게 이용할 수 있도록 설정해 보도록 하겠습니다.

1. syntax highlight 플러그인 해제.

복사 버튼을 만들기 위해서는 제일 먼저 'syntax highligh 플러그인'을 사용하시는 분은 해제를 해야 합니다.

'syntax highligh 플러그인'을 해제하지 않고 설치 시 하이라이트에 오류가 발생합니다.

2. JavaScript 코드파일 업로드

1. 아래 첨부된 2개의 파일을 다운로드 후 '파일업로드에' 추가합니다.

2. 관리자 홈에서 '꾸미기 > 스킨 편집 > html 편집 > 파일업로드'로 들어가 '추가'합니다.

3. clipboard.min.js'와 'query-3.3.1.min.js'파일을 선택 후 '열기'를 눌러 업로드합니다.

3. JavaScript 코드 작성

파일을 업로드 하셨다면 아래 clipboard.js를 HTML에 넣어줘야 합니다.

1. 파일업로드 좌측의 'HTML'로 들어갑니다.

▼ HTML 코드 복사

<!--코드블럭 복사 버튼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 끝-->

2. <head> 바로 아래 넣어줍니다.

- 다른 곳에 넣어 보니 블로그의 관리버튼이 안 눌리는 현상이 있어 맨 위에 넣어주니 정상적으로 작동했습니다.

4. 복사 버튼 만들기(이미지 업로드, js파일 수정)

복사 버튼 이미지 업로드.

1. 아래 버튼.png파일 중 원하는 파일을 다운로드하여 '파일 업로드'에 업로드합니다.

▼ 버튼이미지 1, 2

CodeBlockCopy.js 파일 수정.

1. 아래의 CodeBlockCopy.js파일을 다운로드 합니다.

CodeBlockCopy.js

0.00MB

2. 다운로드한 CodeBlockCopy.js 파일을 메모장으로 열어 먼저 업로드한 버튼 이미지의 주소로 바꿔 줍니다.

3. 변경해야 하는 이미지 코드입니다.

// (option) Text 버튼 -> 이미지 버튼
let img = document.createElement('img');
img.className = "clippy";
img.setAttribute('width', '35'); <-- 버튼 가로크기
img.setAttribute('src', '복사한 버튼 이미지 주소'); <-- 이미지 주소
img.setAttribute('alt', 'Copy to clipboard');
button.appendChild(img);

4. 업로드한 버튼.png 이미지 주소를 복사해서 붙여 넣고 저장합니다.

5. 수정한 CodeBlockCopy.js 파일을 '파일 업로드'에 업로드 합니다..

복사버튼 CSS 적용.

-여기까지 잘 따라 하셨다면 버튼생성은 완료되고, 이제 CSS코드만 적용하면 완료됩니다.

1. HTML에서 아래 코드를 <body>와 </body> 사이에 추가합니다

<!--코드블럭 복사 버튼2-->
<script src="./images/CodeBlockCopy.js"></script>
<!--코드블럭 복사 버튼2 끝-->

2. 아래 그림처럼 </body> 바로 위에 넣어주면 됩니다.

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;
    }
}
/* 코드블럭 복사버튼 스타일 끝 */

728x90

6. syntax highlight 플러그인 적용

마지막으로 'syntax highligh' 플러그인을 다시 적용하고 하이라이트 테마를 적용해 줍니다.

마무리

이렇게 코드블럭의 복사 버튼과 하이라이트에 대해 간단하게 알아봤습니다.

이 외에도 검색을 해보시면 다양한 복사버튼을 찾을 수 있으니, 마음에 드시는 스타일로 적용해 보시기 바랍니다.

[˙티스토리 북클럽] 코드블럭 한 번에 꾸미기 #2(폰트수정, 줄번호, 열기 및 닫기 버튼, 스크롤)

티스토리 I 코드블럭 한번에 꾸미기 #2(폰트수정, 줄번호, 열기 및 닫기 버튼, 스크롤)

코드블럭 한번에 꾸미기 #2 이번에는 코드블럭에 '폰트수정, 줄번호, 열기 및 닫기 버튼, 세로 스크롤'을 적용하는 법을 알아보겠습니다. 아래 코드들은 제가 블로그를 시작하고 글을 하나 둘 올

galam.tistory.com

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"

저작자표시 비영리 변경금지

'▸티스토리 이야기 > •티스토리 꾸미기' 카테고리의 다른 글

티스토리 북클럽 스킨 \| "h1 태그가 2개입니다." 문제 원인과 해결 방법 (27)	2023.04.27
티스토리 \| 코드블럭 한번에 꾸미기 part 2(폰트수정, 줄번호, 열기 및 닫기 버튼, 스크롤) (3)	2023.03.23
티스토리 I 마우스 오버시 썸네일이 움직이는 애니메이션 효과 만들기 (0)	2023.03.21
티스토리 북클럽 스킨 \| 태그(Tag) 숨기는 방법 (0)	2023.03.14
티스토리 I 이미지파일을 파비콘(ico) 파일과 아이콘(png) 파일로 바꿔주는 사이트 (0)	2023.03.11