효과적인 코드 시각화, highlight.js

웹에서 코드를 예쁘게 보여주는 javascript 라이브러리 highlight.js를 소개한다. 사용법은 어렵지 않아 짧은 글이 될 것이다.

티스토리 블로그를 쓰면서 조금 불편했던 부분이 WYSIWYG (What You See Is What You Get) 에디터였다. 특히 코드를 입력하고자 할 때가 문제이다. 티스토리에서 제공하는 에디터는 정석적인 코드 포맷팅을 제공하지 않아서 그동안 나는 글상자를 만들고 거기에 Courier New 글씨체를 일일이 적용해서 썼었다.

# 그동안 써왔던 코드 박스

$ source .venv/bin/activate
(.venv) $ pip install ipython

# IPYTHON
> print('GOOD NIGHT')

코더들은 항상 정석적인 것을 좋아하지 않는가? 위의 코드 박스가 큰 문제가 있는 것은 아니지만... 뭔가 정당하지 않은 느낌이 날 괴롭혔다. HTML에서 <pre>와 <code> 태그를 사용하면 내 맘이 편해진다.

<pre><code>
# 자연스러운 HTML 코드 박스
$ source .venv/bin/activate
(.venv) $ pip install ipython

# IPYTHON
&gt; print('GOOD NIGHT AGAIN')
</code></pre>

# 자연스러운 HTML 코드 박스
$ source .venv/bin/activate
(.venv) $ pip install ipython

# IPYTHON
> print('GOOD NIGHT AGAIN')

<code> 안에서 escape가 필요한 특수 기호가 있다는 점을 알아두자. 예를 들어 > 기호 대신 %lt;라고 써주어야 인식된다.

사실 이걸로도 충분하다. 그동안 이렇게 안 쓰고 div에 style이 덕지덕지 붙은 글상자를 썼었다니... 시간이 날 때 지난 글들을 하나씩 고쳐나갈 생각이다. 각설하고, 이 코드 박스에 highlight.js를 통해서 다양한 프로그래밍 언어별 효과를 줄 수 있다.

highlight.js 사용방법

가장 간단하게 cdn을 이용하는 방법을 설명하겠다. HTML 문서의 css와 javascript를 불러오는 부분에 각각 highlight.js의 요소들을 다음과 같이 불러주면 된다.

<!-- css for highlight.js -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/default.min.css">

<!-- javascript file for hightlight.js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
<!-- activate highlight.js -->
<script>hljs.initHighlightingOnLoad();</script>

이렇게만 하면 <pre><code> 안에 들어간 코드 내용을 판별해서(가장 syntax가 가깝다고 생각하는 언어를 선택한다) 프로그래밍 언어에 알맞는 highlighting을 해준다. 이미 위의 코드 박스에서도 HTML 형식에 맞게 효과를 준 것을 알 수 있다. 또한 내가 직접 <code> 클래스를 주어 프로그래밍 언어를 지정할 수 있다. 위의 예제를 다시 한 번 언어에 맞게 써보겠다.

<pre>
<code class="shell">
$ source .venv/bin/activate
(.venv) $ pip install ipython
</code>
<code class="python">
&gt; print('GOOD NIGHT AGAIN AND AGAIN!')
</code>
</pre>

$ source .venv/bin/activate
(.venv) $ pip install ipython

> print('GOOD NIGHT AGAIN AND AGAIN!')

티스토리 에디터보다 마크다운이 있었으면 좋겠다는 생각을 한다.

파리 여행을 다녀온 후 블로그 글을 쓰지 못해 의무감에 시작한 포스팅이었다. 굉장히 간단한 주제를 잡았다고 생각했는데 생각보다 쓰는 시간이 오래 걸린다. 역시 블로그질을 만만히 보면 안된다. 파리 여행도 정리를 해야하는데...

---

참조 링크

highlight.js 프로젝트 페이지: 기본적인 사용법, 제공하는 프로그래밍 언어 리스트, 커스텀 다운로드 등을 제공한다.
https://highlightjs.org/

highlight.js 공식 문서: 더욱 자세한 사용법을 알고 싶다면 읽어보는 것도 나쁘지 않다.
http://highlightjs.readthedocs.io/en/latest/index.html