highlight.js 사용하기

github.io -> blogger.com -> 티스토리 로 블로그를 옮겨다니면서 제일 속썩였던 게 code highlighter였습니다. 테마는 손 쉽게 적용할 수 있지만 원하는 테마를 찾기가 쉽지 않았고 블로그를 막 시작했을 때에는 html, css, js를 거의 몰랐던 터라 간단한 폰트 수정도 힘들었습니다. 이 글은 지금까지 한 삽질의 결과라 할 수 있습니다. 가이드가 될 수 있었으면 좋겠습니다.

---

1. highlight.js - 링크

코드 하이라이터 최고봉은 이겁니다. 테마 개수부터 접근성까지 넘사벽입니다. 파일 두 개와 스크립트 하나만 추가하면 손쉽게 사용 가능합니다.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

위 스크립트를  </head> 직전에 추가해주기만 하면 됩니다. 사용은 <pre><code class="html">"Hello World"</code></pre>와 같이 <pre><code>태그 안에 코드를 삽입 해주면 됩니다. 언어는 거의 다 지원합니다.

테마는 여기에서 테마를 고른 뒤 여기에서 테마의 파일이름을 찾아 default 자리에 넣어주면 됩니다. 전 atom 테마가 제일 맘에 드는데 얘만 안 되네요.

---

2. 커스터마이징

막 적용하고 나서는 별로 볼품이 없습니다. 특히 윈도우에서 보면 제가 제일 싫어하는 기본 monospace 폰트가 적용되어 있습니다. 폰트는 

.skin_view .area_view code { font-family:Menlo,Consolas,Monaco,monospace; }

에서 추가해주면 됩니다. 기본폰트는 <pre>에 설정되어 있는데 이러면 브라우저가 기본 폰트로 덮어 씌웁니다. 티스토리 css 179번째 줄에 있습니다.

---

3. inline 코드 스니펫

얘 알아내는 게 제일 빡셌습니다. 일단 css에 아래 코드를 추가해줍니다.

.skin_view .area_view p > code.hljs { display: inline; padding: 2.5px 7.5px; }

하는 김에 padding도 조정해줍시다. 그리고 html로 돌아가 스크립트를 바꿔줍시다.

$(document).ready(function() {
  	$('pre code').each(function(i, block) {
    		hljs.highlightBlock(block);
  	});
	$('p code').each(function(i, inline) {
		hljs.highlightBlock(inline);
	});
});

를 <script>hljs.initHighlightingOnLoad();</script> 자리에 바꿔 넣어주면 됩니다.

이제 <code class="html">Hello World</code> 이런 식으로 인라인으로 삽입해줄 수 있습니다.

---

해결 안 된 과제

- 모바일에서 인라인 코드가 하이라이팅이 안 된다.

- 마크다운처럼 `` 안에다가 넣게 하는 방법 없나