[5분 컷] 티스토리 블로그에 코드블럭 예쁘게 출력하는 방법_highlight.js

티스토리에서 코드와 관련된 포스팅을 올리면서

왜 내껀 다른 블로그와 다를까 하는 궁금증이 남았다.

내 포스팅에 코드도 요렇게 예쁘게 나왔으면 좋겠는데...

그래서 가져왔다. 티스토리 블로그에 코드블럭 예쁘게 출력하는 방법!

아주 쉽다. 아래 스텝을 따라하며 5분 컷으로 끝내버리자. 

---

 

---

1. 티스토리에 코드 입력하는 방법 (이미 했다면 스킵 가능)

기본적으로 티스토리 블로그에서 코드를 예쁘게 만들 수 있는 코드블럭을 제공한다.

설정하는 방법을 하나씩 따라해 보시라.

 

먼저 요약부터.

1번 요약
블로그 설정 > 플러그인 > syntax 검색 > Syntax Highlight 플러그인 활성화 >
글쓰기 > 더보기 > 코드블럭 > 코드입력 > 끝.

 

먼저 블로그 설정 > 플러그인 >

 

검색창에 “syntax” 입력

 

해당 플러그인을 활성화 하자.

그러면 글쓰기에서 아래와 같이 코드 입력창이 활성화 된 것을 볼 수 있다.

 

코드블럭을 클릭하면 아래와 같은 입력창이 나오는데, 거기에 코드를 복붙 하자.

 

아래와 같이 내 글에 코드블럭이 입력 되었다.

 

 

---

2. 예쁘게 출력하는 방법 : highlight.js 입히기

늘 그렇듯이, 요즘 세상엔 내가 원하는 건 누군가가 자아알 만들어 놓았다.

아주 간단하게 내 블로그 html에 몇 줄 추가하는 것으로 내 코드블럭을 예쁘게 만들 수 있으니 아래를 따라해보자.

 

highlight.js 사이트로 이동하자.  링크 → https://highlightjs.org/

페이지에서   Get version 10.6.0  을 클릭하자. 다운로드 받는건 아니다.

 

들어가면 다음과 같은 화면이 나올 것이다.

여기에서 첫번째 녀석을 HTML에 갖다 붙이면 된다.

하지만!!! 아직 붙이지 마시라. 그 전에 할 일이 하나 더 있다.

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/highlight.min.js"></script>

 

내 취향에 맞는 테마를 골라야 한다.

아래 링크에 들어가면 언어별 테마들의 데모를 보여준다.

내가 주로 사용할 언어를 선택하고, Themes를 살펴보자.

highlightjs.org/static/demo/

highlight.js demo

 

예쁜 녀석들이 아주 많다.

나는 paraiso dark 테마를 골랐다. 

이제 할일은,

위에서 붙이려고 했던 html 코드를 살짝만 수정해주면 된다.

두번째 줄의 default.min.css 의 default를 내가 원하는 테마로 바꿔주면 된다.

Paraiso Dark 테마를 골랐다면 빈공간을 대쉬('-') 로 채워주고 --> paraiso-dark

대소문자 구분은 상관없다.

default를 지우고 선택한 테마를 입력한다. 여기서 min.css는 건드리지 않는다.

 

BEFORE

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/highlight.min.js"></script>

 

AFTER

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/paraiso-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/highlight.min.js"></script>

 

자 여기까지 했으면 거의 다 됐다.

이걸 우리 티스토리 블로그에 얹이자. 

우리 블로그의 html의 head 안에 집어넣으면 끝이다.

블로그 관리 > 스킨 편집 > html 편집 > </head> 위에 복붙 하고 > 적용 클릭!

요렇게 </head> 위에 바로 얹어주자.

 

 

---

3. 완성

 

그리고 글쓰기로 돌아와서 코드블럭을 입력해보자. 

단, 입력 시 입력할 언어를 고르는걸 잊지말자.

한번 선택해 두면 기본으로 설정 되는 듯 하니 즐겨쓰는 언어가 있다면 매번 고를 필요는 없다.

 

결과물

def GuGu(n):
    result = []
    i = 1
    while i < 10:
        result.append(n * i)
        i = i + 1
    return result

 

---

 

참 쉽죠?

이쁜 코드블럭을 골라 잘 활용하긴 바란다.

끝~~