✨ 티스토리 코드블록을 업그레이드하는 모든 방법에 대해 알아봅시다

티스토리 코드 블록을 최대한 쓸만한 물건으로 좋게 만들어봅시다. 다른 블로그 글보다 잘 쓸 자신은 없어 자세한 내용은 걸어놓은 다른 블로그 링크를 살펴봐주세요.

모든 과정을 적용하시면 이렇게 못생겼던 코드 블록이

@requires_authorization(roles=["ADMIN"])
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1 + 0b10l) or None

class SomeClass:
    pass
    
#스크롤 아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아

>>> message = '''interpreter
... prompt'''

이렇게 이쁘게 변합니다. (PC에서만 정확히 보여요)

코드 블록 업그레이드 과정 목차

티스토리 코드 블록에 Highlight.js 적용하기
티스토리 코드 블록 옆 라인 넘버 추가하기
티스토리 코드 블록에 스크롤 추가하기
티스토리 코드 블록에 복사 버튼 추가하기 (적용 못함)

티스토리 코드 블록에 Highlight.js 적용하기

Highlight.js는 코드블럭에 색을 칠해 강조해주는 자바스크립트입니다. 적용시키면 다음과 같이 보이게 됩니다.

Highlight는 티스토리 기본 플러그인에 포함되어있습니다. 적용시키려면 블로그 관리 → 플러그인에서 코드 문법 강조를 찾아주세요.

클릭한 다음 왼쪽에서 원하는 테마를 선택하신 후 오른쪽의 적용 버튼을 누르시면 됩니다.

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

추가로 아래 작업들을 하기 위해 블로그 관리 → 스킨 편집 → HTML 편집에 들어가서 위 코드를 <head> 안에 넣어 highlight.js를 불러와주세요.

참고 자료 : [TISTORY/Code Block] 티스토리 코드 블록 하이라이트(highlight.js) 테마 설정

티스토리 코드 블록 옆 라인 넘버 추가하기

라인 넘버를 추가하면 코드 블록 왼쪽 부분에 해당 코드가 몇 번째 줄의 코드인지 숫자로 표시되어 보기 편해집니다. 또 코드를 지칭할 때도 몇 번째 줄인 지 번호만 말하면 되므로 편해집니다. 라인 넘버는 highlightjs-line-numbers.js를 이용하여 적용합니다. 라인 넘버를 적용시키면 위처럼 보이게 됩니다.

<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>

라인 넘버를 적용시키려면 위 코드를 블로그 관리 → 스킨 편집 → HTML 편집에 들어가서 <head> 안에 넣어주시면 highlightjs-line-numbers.js가 불러와집니다.

위 코드를 적용시키면 코드 블록이 위 사진처럼 깨질 때가 있습니다. 이는 코드블럭에 기존 티스토리 css 코드의 table에 관련된 설정이 적용되어 그런 것입니다. 이를 고치려면 티스토리 스킨의 css 코드를 고쳐줘야 합니다.

아까와 같이 블로그 관리 → 스킨 편집 → HTML 편집에 들어가서 위의 CSS탭을 눌러줍니다. 그 후 .entry-content table로 검색해 위 태그들을 찾은 후 사이에 >를 넣어줍니다. >는 css에서 직계 자식만 선택하는 선택자입니다.

추가) 티스토리 코드 블록 라인 넘버 옆에 줄을 넣고, 글씨를 흐리게 만들기

/* for block of numbers */
.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: center;
    color: #666;
    border-right: 1px solid #CCC;
    vertical-align: top;
    padding-right: 5px;

    /* your custom style here */
}

/* for block of code */
.hljs-ln-code {
    padding-left: 10px;
}

어렵게 길게 늘려서 말했지만, 간단히 말해 라인 넘버의 스타일을 바꾼다는 이야기입니다. CSS 탭에 들어가서 위 코드 내용을 맨 아래에 복사해주시면 이 블로그와 같은 설정이 됩니다.

참고 자료 : [TISTORY/Code Block] 티스토리 코드 블록 라인 넘버(line number) 설정

티스토리 코드 블록에 스크롤 추가하기

기본 티스토리 코드 블록에서는 코드가 한 줄로 너무 길어지면 줄 바꿈을 해서 보여줍니다. 이 설정은 코드를 한눈에 볼 때는 편할 수 있지만, 코드의 전체 구조가 흐트러져 보기 불편할 때도 있습니다. 스크롤 바를 추가해서 티스토리 코드블록 줄바꿈을 없애고 코드가 옆으로 길어질 때 스크롤바를 움직여서 보게 할 수 있습니다. 스크롤바를 추가하면 위와 같이 보입니다.

code {
    white-space: pre;
    max-width: 860px; 
    overflow: auto !important;
}

블로그 관리 → 스킨 편집 → HTML 편집에 들어가 CSS탭을 열어줍니다 그 후 위 코드를 복사해 넣어줍니다. 코드의 뜻은 다음과 같습니다.

white-space : pre; : 공백을 그대로 표시한다는 뜻입니다.
max-width: 860px; : 가로 최대 길이를 설정합니다. 이 길이가 넘어가면 스크롤이 만들어집니다. 티스토리 글에서 가로 최대폭이 860px이라 이렇게 설정했습니다.
overflow: auto !important; : 앞서 설정할 길이보다 넘어설 경우(overflow) 스크롤이 생기게 하는 코드입니다. !important를 넣어 가장 높은 우선순위로 적용됩니다.

참고 자료 : [TISTORY/Code Block] 티스토리 코드 블록 스크롤(Scroll) 설정

티스토리 코드 블록에 복사 버튼 추가하기 (적용 못함)

복사 버튼은 누르면 안의 코드가 복사되는 버튼입니다. 티스토리 블로그에서는 보통 복사 금지를 걸어놓을 때가 많습니다. 그래서 코드가 있어도 복사를 못하게 될 때가 많습니다. 그럴 때 clipboard.js를 이용한 복사 버튼을 위와 같이 달아 놓으면 해결할 수 있습니다. 그 외에도 복사 버튼을 이용하면 복사했을 때 출처 표기가 뜨지 않기 때문에 편하게 이용할 수 있습니다.

티스토리 - 클립보드로 복사 버튼 추가하기

개요 그동안 블로그를 운영하며 별 고민 없이 콘텐츠를 무단으로 복사할 수 없도록 티스토리에서 제공하는 플러그인을 사용하여 마우스의 사용을 막아 놓았습니다. 하지만 가만히 생각해보니

rottk.tistory.com

아쉽게도 제 블로그에서는 적용이 되지 않았습니다. 아마 제가 공부를 더 하고 나서 방법을 찾아봐야 될 것 같네요. 복사 버튼에 대해 더 자세한 설명을 원하시면 위 링크를 클릭해서 확인해주세요.

궁금한 내용이 있으면
화면 왼쪽 아래의 디스코드 아이콘을 누르면 실시간으로 답해드립니다.
(아이콘이 보이지 않는다면 에드 블록을 꺼주세요)

https://discord.link/pseudodeveloper

또 위 링크를 눌러 가짜 개발자 서버에 들어오시면
블로그의 새 글 알림을 받고
SSAFY, 부스트캠프, 포유드림, 우아한테크코스, 프로그래머스와 같은
국비지원 교육 일정을 자동알림 받을 수 있습니다.

내가 보려고 정리하는 프로그래밍