![[Tistory] 티스토리 코드블럭 꾸미기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fz3QZX%2FbtrShCequlO%2FAAAAAAAAAAAAAAAAAAAAAM2PzrsUvRbMDzd_KC1lwq-nnvP500v7h-ZSCL3K7JIB%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3D7qs9BNWncDFeQbGrNvAfu5DSJwc%253D)
하이라이트 테마 설정
방법 1 - 가장 간단한 방법
블로그 관리 페이지 메뉴에서 [플러그인] → [Syntax Highlight] 를 클릭한다.
원하는 테마를 선택하고 [적용]을 클릭하면 적용된 모습을 확인할 수 있다.
방법 2 - 사이트 사용하는 방법
1. https://highlightjs.org/에 들어가서 [Get version] 을 클릭한다.
highlight.js
Version 10.7.2 This is a patch release. The only change is that deprecation messages are throttled and shown only once.
highlightjs.org
2. cdnjs 코드를 복사한다. 여기서 보면 style이 default로 설정되어 있는데 데모 페이지에서 원하는 테마를 골라준다.
https://highlightjs.org/static/demo/
highlight.js demo
highlightjs.org
마음에 드는 테마를 골랐으면 default 부분을 테마의 이름으로 수정한다.
이때, 주의할 점이 있다.
- 모든 글자는 소문자로 변경
- 띄어쓰기는 하이픈(-)으로 변경
예를 들어, 변경하고 싶은 테마가 Atom One Dark Reasonable 이면 아래 코드처럼 변경하면 된다.
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark-reasonable.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>3. 블로그 관리 페이지 → [스킨 편집] → [html 편집] 으로 이동한다.
4. <head></head> 태그 안에 복사한 코드를 삽입한다.
cdnjs 코드와 코드가 실행될 수 있도록 OnLoad() 코드도 삽입해준다.
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark-reasonable.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>만약, 적용이 되지 않는다면 [플러그인] → [Syntax Highlight] 를 사용 해제하면 된다.