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

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

코더들은 항상 정석적인 것을 좋아하지 않는가? 위의 코드 박스가 큰 문제가 있는 것은 아니지만... 뭔가 정당하지 않은 느낌이 날 괴롭혔다. 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