티스토리 코드블럭을 highlight.js로 하이라이팅하기

이번에 새로 제공되는 티스토리의 코드 블럭 기능은 에디터에서는 자동으로 하이라이팅이 지정되지만, 공개하면 하이라이팅이 되지 않습니다. 티스토리에서는 기존에 사용자들이 사용하던 하이라이팅 기능과 충돌을 방지하기 위해서 코드블럭을 HTML로 자동으로 만들어 주는 기능까지만 제공한다고 합니다. 

 

https://notice.tistory.com/2483

코드블럭으로 소스코드 작성하기

그래서 highlight.js를 이용해서 하이라이팅하는 방법을 알아보겠습니다. 

 

https://github.com/highlightjs/highlight.js

highlightjs/highlight.js

사용방법은 매우 간단합니다. 스킨편집 모드에서 다음의 3줄을 넣기만 하면 됩니다. 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"> 
<script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

다음처럼 입력후 저장하면 됩니다.