highlight.js를 이용하여 티스토리 블로그에서 코드 문법 강조(syntax highlighting)

highlight.js를 이용하여 티스토리 블로그에서 코드에 문법강조(syntax highlighting)를 적용하는 방법이다.

1. hightlight.js에서 JavaScript파일과 CSS style 파일을 다운로드 한다.

highlight.js 웹사이트에서 "Get version" 버튼을 누른다.

"Get version" 버튼을 누르면 아래와 같이 문법 강조를 적용하고자 하는 언어 또는 라이브러리를 선택할 수 있다.

"Download" 버튼을 누르면 zip 파일을 받게 되는데, zip 파일의 내부는 대략 다음과 같다

여기에서 우리에게 필요한 파일은, highlight.pack.js와 styles 디렉토리 안에 있는 theme CSS 파일이다 (나는 monokai_sublime.css을 사용하기로 함).

2. JavaScript파일과 CSS style 파일을 티스토리 블로그에 업로드 한다.

티스토리 블로그 관리자 페이지에서, highlight.pack.js와 monokai_sublime.css (styles 디렉토리 안에 있음) 두 개의 파일을 다음과 같이 업로드 하면 된다.

파일이 업로드 된 것을 다음과 같이 확인할 수 있다.

3. skin.html에 highlight.js 및 style을 적용을 하기 위한 코드를 추가한다.

아래 붉은 박스로 표시한 것처럼, 자신의 티스토리 환경에 따라 파일 위치 및 파일명을 작성해 주면 된다.

※ 아래 코드를 붙여넣으세요 (syntax highlighting이 적용된 모습).

<link rel="stylesheet" href="./images/monokai_sublime.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
 

블로그 글 작성 시 코드를 첨부하고 싶을 때 html 모드에서 <pre><code class="언어명"></code></pre>를 이용한다.

예를 들어 아래와 같이 사용하면 된다.

<pre><code class="언어">코드 ...</code></pre>

highlight.js 문서를 보면 알 수 있는데, 단순함을 위해 라인번호 표시나 줄단위 색칠은 지원하지 않는다고 한다.

(참고: http://highlightjs.readthedocs.org/en/latest/line-numbers.html)

※ 사소한팁 #1

C++나 markup language와 같이 꺽쇠(brackets, < 또는 >) 가 코드에 포함되어 있는 경우, 일일이 &lt; 또는 &gt; 로 변환해 주어야 한다. 하지만 아래와 같은 방법이 있다.

1. 티스토리 블로그 글을 작성할 때 html 모드에서 첨부하고자 하는 코드를 <textarea> </textarea>로 감싸주고 저장을 한다. 글을 다시 열어서 html 모드에서 보면 <textarea>에 포함되어 있는 꺽쇠가 모두 변환되어 있는 것을 볼 수 있다. 이 때, <textarea> tag는 없애고 hightlight.js를 이용하기 위해 <pre><code></code></pre>로 변환된 코드를 다시 감싸주면 된다.

2. 꺽쇠를 자동으로 html character로 변환해 주는 web application 을 이용한다.

postable: http://www.elliotswan.com/postable/

참고: http://spoonfedproject.com/html/easily-convert-characters-to-html-entities/

아래와 같이 style attribute를 이용하여 폰트 설정을 해줄 수도 있다.

<pre><code class="python" style="font-family:courier; font-size:14px">
...
</code></pre>