티스토리 Code Highlight 적용 (Highlight.js)

예전에 블로그를 이용할 때 쓰다가 

요즘들어 다시 티스토리에 포스트를 하다보니 

개발관련 코드 넣을 일이 많네요.

그리하여 다시 Code Highlight를 이용할려고 찾다보니 Highlight.js가 눈에 들어오더군요.

설치도 스타일 적용도 

https://highlightjs.org 사이트에 가시면 

여기서 설명이 필요없을 정도로 간단합니다.

그래도 소개는 해드려야죠..^^

우선 CDN을 이용하는 방법과 파일을 티스토리로 업로드 하는 방식이 있습니다.

1. CDN을 이용하는 방식 (추천)

설치는 딱 3줄... 

CDN를 블로그에 붙여넣고 초기화 코드만 불러주면 끝!

티스토리 관리자 > 꾸미기 > 스킨편집 > html편집 > HTML탭에서 </head> 위로 아래 코드를 추가해줍니다.

<!-- highlight.js -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-dark-reasonable.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

참고로 저는 atom-one-dark-reasonable.min.css 스타일이 마음에 들어 default.min.css를 변경하였습니다.

2. 티스토리 업로드 방식

1) highlight 다운로드

https://highlightjs.org/download

Custom package에서 원하는 지원언어를 선택 후 다운로드 합니다.

왠만해서 기본선택된 Common에 있는 것만 하셔도 될겁니다.

2) 티스토리 업로드 및 설정

티스토리 관리자 > 꾸미기 > 스킨편집 > html편집 > 파일업로드

추가하여 파일을 업로드 후 HTML 탭에서 아래 코드를 </head> 위에 추가해줍니다.

<!-- highlight.js -->
<link rel="stylesheet" href="./images/atom-one-dark-reasonable.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

사용방법

<pre><code>코드...</code></pre> // 자동언어설정
<pre><code class="html">코드...</code></pre> // html 언어설정
<pre><code class="javascript">코드...</code></pre>
<pre><code class="bash">코드...</code></pre>

기본적으로 위 방식대로 이용하며 자세한 이용 방법은 highlight 사이트 usage를 참고하셔서 이용하시면 됩니다.

https://highlightjs.org/usage/

안에 들어갈 코드나 태그는 escape 되도록 포스트되는 에디터에서 작성하시고 

html 편집모드에서 <pre><code>코드</code></pre> 태그로 코드를 감싸주세요.