티스토리(Tistory) 코드블럭 테마 바꾸기

간단하게 플러그인을 이용하여 코드블럭 테마 바꾸기

1. 티스토리의 관리자창으로 들어가서 왼쪽 사이드바에 플러그인 메뉴를 클릭한다.
2. 검색 버튼을 누르고 코드를 검색한다.
3. 코드 문법 강조(Syntax Highlight)를 클릭하고, 사용하고 싶은 테마를 선택하여 적용한다.

---

HTML을 편집하여 코드블럭 테마 바꾸기

1. 다음 코드를 복사한다.

아래의 코드는 highlight.js를 Browser에서 사용할 때 사용한다.
(자세한 방법은 https://highlightjs.org/usage/를 참고)

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

---

2. highlight.js demo 사이트(https://highlightjs.org/static/demo/)에서 원하는 테마를 찾는다.

나는 Visual Studio Code를 사용하여 익숙한 Vs 2015 테마를 사용하였다.

---

3. 원하는 테마에 맞춰 복사한 코드를 수정한다.

맨 첫 줄의 끝 부분에 있는 default.min.css를 사용할 테마이름.min.css로 바꾼다.

수정 방법

• 코드를 수정할 때 테마 이름을 그대로 넣는 것이 아니라 대문자는 소문자로 바꾸고, 띄어쓰기는 -로 바꾸어야 한다.
  • 예시
    Paraiso Dark -> paraiso-dark
    
• 띄어쓰기가 있지만 -가 없이 그냥 붙여쓰는 경우도 있다.
  • 예시
    Vs 2015 -> vs2015

수정이 제대로 되었는지 검사

• 코드 첫 줄에 나와 있는 주소(href=의 뒷부분)의 앞에 'https://'를 붙여 브라우저로 열어본다.
• 예시
  https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/vs2015.min.css
  

코드가 제대로 수정되었다면 이러한 형식의 내용을 확인할 수 있다.

코드가 제대로 수정되지 않았다면 이러한 내용을 확인할 수 있다.

💡 코드가 제대로 수정되었는지 확인했음에도 코드블럭이 수정되지 않는 경우가 있다. 왜 그런지는 모르겠다.

수정 예시

• 나는 Vs 2015 테마를 사용하기 위해 default.min.css를 vs2015.min.css로 코드를 수정하였다.

<!-- 맨 첫 줄의 끝 부분에 있는 default.min.css를 사용할 테마이름.min.css로 바꾼다. -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/vs2015.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

 

4. Tistory의 html을 편집한다.

• 티스토리의 관리자창으로 들어가서 왼쪽 사이드바에 꾸미기의 스킨 편집 메뉴를 클릭한다.
• html 편집 버튼을 클릭한다.
• 윈도우는 Control + F, 맥은 Command + F를 눌러 내부 검색 창을 띄운다.

• </head>를 검색하여 찾는다.
• </head> 위에 수정한 코드를 추가한다.

• 적용 버튼을 누르고 코드 블럭이 제대로 작동하는지 확인한다.