[Tistory] highlight.js 사용하여 코드블럭 테마 적용하기 [티스토리 코드블럭 테마 적용]

- highlight.js 사용하여 코드블럭 테마 적용하기

티스토리 코드블럭의 테마를 설정해보려고 한다. 코드라인 넘버를 위해 highlight.js를 사용할 예정.
→ 라인넘버 안할 거라면, 플러그인에 있는 '코드 문법 강조(Syntax Highlight)'를 사용해도 된다.

Getting highlight.js

---

코드블럭으로 사용할 언어들 체크 후, 하단의 'Download' 클릭

 

사용하고자 하는 테마는 아래 사이트에서 고를 수 있다.

highlight.js demo

---

demo 사이트에서 여러 스타일의 테마를 참고할 수 있다.

 

다운로드 받은 js 파일과 css 파일을 '스킨편집'에 올려준다.

js 파일 : highlight.js, highlight.min.js
css 파일 : atom-one-light.min.css → 적용하고자 하는 테마의 css만 업로드하면 된다.

 

해당 파일들을 업로드 해준다.

 

스킨편집 HTML에는 아래의 코드를 추가해준다.

<!--  코드 블럭 highlight 추가 -->
<script src="./images/highlight.min.js"></script>
<link href="./images/atom-one-light.min.css" rel="stylesheet">	
<script>hljs.initHighlightingOnLoad();</script>

 

css는 자신이 업로드한 파일명으로 입력해야 한다.

---

hilight.js 활용하여 코드블럭 테마 적용 완료!

---

- 코드블럭 라인넘버 추가

[Tistory] 티스토리 코드블럭에 라인넘버(line number) 표시하기 [highlightjs-line-numbers]

---

- 참고자료

[티스토리]코드블럭 테마 적용

---