tistory code highlight 추가

1 간단한 방법

https://colorscripter.com/

Color Scripter

color scripter를 이용하여 복사-붙여넣기 사용

2 highlight.js 소개

2.1 highlight.js 페이지

https://highlightjs.org/

highlight.js

2.2 내가 원하는 테마 확인

내가 원하는 테마 demo로 확인

https://highlightjs.org/static/demo/

highlight.js demo

3 highlight.js 적용

3.1 다운로드

Get version > 언어 선택 > Download

3.2 암축 해제

압축해제

압축을 푼 폴더에서 필요한 파일은 highlight.min.js와 styles/내가_원하는_테마.min.css 이다.

3.3 파일 업로드

블로그 관리 > 스킨 편집 > html 편집 > 파일업로드

 

highlight.min.js와 styles/내가_원하는_테마.min.css 파일을 업로드한다.

3.4 html 편집: head에 추가

<script src="./images/highlight.min.js"></script>
<link rel="stylesheet" href="./images/내가_선택한_테마.min.css">
<script>hljs.initHighlightingOnLoad();</script>

코드 추가 결과 이미지

3.5 html 편집: head에 추가

위의 3.4 방법도 물론 동작하지만, highlight.js의 사용법에 따라 코드를 변경한다. 

<script src="./images/highlight.min.js"></script>
<link rel="stylesheet" href="./images/dracula.min.css">
<script>hljs.highlightAll();</script>

코드 변경 결과 이미지

highlight.js 사용법 페이지: https://highlightjs.org/usage/

highlight.js의 cdnjs의 소스코드와 같다. 

다른 점은 경로를 cdn 서버로 할지, 로컬(티스토리 업로드 파일 경로)로 할지의 차이뿐이다.

 

---

참고: https://tuttozurich.tistory.com/19#--%--highlight-zip%--%ED%-C%-C%EC%-D%BC%--%EB%-B%A-%EC%-A%B-%EB%B-%-B%EA%B-%B-