티스토리 - 코드 하이라이트 적용하기 (highlight.js)

 

highlight.js 라이브러리로 블로그에 코드 하이라이트 적용하기

 

CDN 링크로 블로그에 highlight.js 적용 방법

구글에 Getting highlight.js 검색 후, 위처럼 Getting highlight.js 클릭

혹은 https://highlightjs.org/download/ 링크로 이동

 

 

 

 

사진 속 cdnjs 링크 복사

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>

간편하게 위 코드 복사

 

 

 

이제 복사한 코드를 티스토리 HTML 파일에 붙일 차례

블로그관리에서 스킨 편집 클릭

 

 

 

 

html 편집 클릭

 

 

 

 

아까 복사한 코드와 <script>hljs.highlightAll();</script> 붙이기

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

간편하게 위 코드를 html에 붙이면 끝

 

 

 

포스팅 시, 코드 삽입하는 법

HTML 편집 모드에서, 코드는 반드시 <pre><code> </code></pre> 두 태그 사이에 삽입해야 함

 

 

기본 코드 하이라이트

미리 보기 시, 코드 하이라이트 적용된 모습

 

 

 

코드 하이라이트 스타일 변경 방법

https://highlightjs.org/static/demo/ 데모 페이지에서 다양한 코드 하이라이트 스타일을 볼 수 있음

만약 데모 페이지에서 찾은 Github라는 스타일을 적용시키고 싶으면

default.min.css에서

github.min.css로 바꾸면 스타일 적용 완료

 

 

 

 

github.min.css 적용 후 스타일

적용 완료