Memo

티스토리 코드블럭 테마/스킨 변경하는 방법

skyey94 2021. 3. 13. 01:15

- 티스토리에 백준 문제 풀이를 하거나 코드를 포스팅 할 일이 있을 때 코드블럭의 여러 테마를 적용하고 싶은 마음이 다들 있을 것 같습니다. 저도!! 이제 최근에 코드를 하나씩 올리기 시작하면서 가끔 코드 블럭의 테마를 바꾸고 어떤게 뭐가.. 이쁜가..??하면서 테마를 적용시켜 보곤 합니다. 그래서 이번 기회에 기본 테마뿐만이 아니라 다른 다양한 테마를 적용하는 방법도 적어보겠습니다.

 

※ 방법 1 (기본 티스토리 플러그인 테마 적용)

 

- 먼저 플러그인에 들어가서 [코드 문법 강조]를 클릭합니다.

(참고로 플러그인은 관리자 화면에 들어가면 좌측 하단에 있습니다!)

 

- 테마를 설정한 후, 적용을 누르면 티스토리 코드블럭에 바로 적용이 됩니다.

(기본 테마 : Atom One Dark / Atom One Light / Github / Monokai / Darcula / Visual Studio / Xcode)

 

※ 방법 2 (highlight.js 이용한 다양한 테마 적용)

 

기본 테마 이외에 다른 테마를 적용하고자 한다면 여기를 이용하면 됩니다. 

- 다양한 테마를 확인하려면 여기를, 사용 방법을 확인하려면 이곳을 확인하면 됩니다. 

사이트에 들어가서 확인을 하면 되지만 간략하게 설명을 적어보도록 하겠습니다! (정말 간략하게! 이것만 하면 된다는 최소의 방법만을!)

 

- 관리자 화면 -> 꾸미기 -> 스킨 편집을 들어가면 위의 화면이 나올것입니다. 여기서 사진의 빨간색 부분인 html 편집을 들어가면 됩니다.

 

 

- 그렇다면 사진의 우측처럼 html 코드가 나올 것입니다. 여기서,

 

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

 

이 코드를 <head></head> 사이에 입력합니다. 근데 여기서 페이지 상단에 여러 테마 보는 사이트(여기입니다!)에서 원하는 테마를 첫번째 줄의 default.min.css에서 default 대신 소문자로(띄어쓰기는 - 로) 적습니다.

글로 적다보니 단번에 이해가 되기도 안되기도 할 것같아서 아래 다시 한번 적어보겠습니다!

먼저, 제가 사이트에서 정한 테마는 아래의 Hybrid입니다.

 

 

그렇다면 대문자는 소문자로, 띄어쓰기는 -로 바꿔서 위의 default 부분에 적어주면 됩니다. (물론 Hybrid는 띄어쓴 데가 없지만 만약 예시로 Hybrid Light가 있다면 hybrid-light라고 적으면 됩니다.)

아래처럼 말이죠.

 

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

 

(그리고 플러그인을 통해 티스토리에서 제공하는 기본 테마가 적용되어있다면 플러그인을 사용중에서 해제 하셔야 합니다!)

 

# 최대한 간단하게 쓰려고 했는데... 의도대로 되었는지는 확신이 안서네요... ㅎㅎ 그래도 한번 시도해보시면 다들 어렵지 않게 사용하실 수 있을 것 같습니다!