하이라이트 테마 설정
방법 1 - 가장 간단한 방법
블로그 관리 페이지 메뉴에서 [플러그인] → [Syntax Highlight] 를 클릭한다.
원하는 테마를 선택하고 [적용]을 클릭하면 적용된 모습을 확인할 수 있다.
방법 2 - 사이트 사용하는 방법
1. https://highlightjs.org/에 들어가서 [Get version] 을 클릭한다.
2. cdnjs 코드를 복사한다. 여기서 보면 style이 default로 설정되어 있는데 데모 페이지에서 원하는 테마를 골라준다.
https://highlightjs.org/static/demo/
마음에 드는 테마를 골랐으면 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] 를 사용 해제하면 된다.