블로그에 글을 올리다보면 소스 코드를 올려야 할 경우가 자주 있다.
그동안 귀찮아서 그냥 소스 코드를 캡쳐해서 이미지를 올리는 방식을 사용했다.
하지만 이왕 블로그를 본격적으로 시작한 거면 제대로 해보자고 생각하여 미뤄왔던 highlight.js를 적용해서 Code Highlight 효과를 줘보기로 했다.
1. hightlight.js란?
스크립트 파일 1개와 css파일 1개를 추가하여 Code Highlight 효과를 낼 수 있다.
현재까지 176개의 프로그래밍 언어를 지원하고 있으며, 79개의 스타일을 제공하고 있다.
2. 다운 받는 법
https://highlightjs.org/에 들어가서 Get Version 버튼을 누른 후, 사용할 언어들을 체크 한 후 다운로드 하면 된다.
3. 티스토리에 추가하는 법
다운로드 받은 후, 폴더를 열어보면 아래와 같은 모습이다.
티스토리에서 HTML/CSS 편집에 들어간 후, 파일 업로드를 통해서 highlight.pack.js와 자신이 사용할 스타일의 css 파일을 추가해준다.
추가한 후, skin.html에 있는 <head></head> 사이에 아래와 같은 코드를 넣어준다. 위에 추가된 모습을 봤듯이 images아래에 파일들이 들어간 것을 볼 수 있다. 따라서 경로는 ./images/가 되겠다.
<LINK rel=stylesheet href="./images/atom-one-dark.css">
<SCRIPT src="./images/highlight.pack.js"></SCRIPT>
<SCRIPT>hljs.initHighlightingOnLoad();</SCRIPT>
4. 코드 넣어서 Code Highlight 효과 주는 법
글 작성 시, HTML 모드로 들어가서 아래와 같이 코드를 넣어주면 된다.
<pre><code>원하는 코드 입력</code></pre>
5. 코드 언어 지정하는 방법
class를 부여 하여 value에 사용할 언어를 넣으면 된다. 만약 스타일이 필요없다면 nohighlight를 넣으면 된다.
<pre><code class="java">원하는 코드 입력</code></pre>
이상 highlight.js를 사용하여 티스토리에서 Code Highlight 효과를 주는 방법을 알아봤다. 위에 해당하는 코드 부분들이 Code Highlight를 준 부분이다.
위에서 설명한 다운받아서 사용하는 방법 외에도 CDN을 이용해서 사용하는 방법도 있으니 편한 것을 선택하여 사용하면 될 것 같다.
WRITTEN BY
- 김치치즈스마일
세계정복!
