웹에서 코드를 예쁘게 보여주는 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
> 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를 통해서 다양한 프로그래밍 언어별 효과를 줄 수 있다.
가장 간단하게 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">
> 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
Bootstrap modal 위에서 jQuery UI autocomplete 사용 (0) | 2017.02.15 |
---|---|
iframe 높이 100% 맞추기 (3) | 2017.01.08 |
MathJax: 웹에서 Latex 수식을 쓰자 (0) | 2016.09.03 |
c3.js 여러 종류의 차트 사용법 (0) | 2016.08.22 |
Bootstrap 기반 티스토리 스킨: 첫 작업 기록 (4) | 2016.08.21 |