highlight.js 사용하기

개요

코드 에디터 테마는 개발자의 아이덴티티이다. 내 블로그의 독립성과 주체성을 나타내기 위해 highlighter는 꼭 필요하다.

---

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>태그 안에 코드를 삽입 해주면 된다. 언어는 unknown으로 설정해놓으면 알아서 인식한다는데 인식 성능은 그렇게 좋진 않다. 어차피 티스토리에 언어 설정 기능 있으니까 크게 문제는 없다.

테마는 여기에서 테마를 고른 뒤 여기에서 테마의 파일이름을 찾아 default 자리에 넣어주기만 하면 된다. 참고로 이름 앞에 base16이 붙은 애들은 데모에서는 `base16-어쩌구저쩌구`와 같이 나와있는데, 실제로는 base16 폴더 안에 들어가있다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/base16/humanoid-light.min.css">

그래서 위와 같이 `base16-humanoid...`가 아니고 `base16/humanoid....`이다. 

 

2. 커스터마이징

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

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

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

+ (2024.01.25) Book club 테마로 바꿔서 그런 건 지는 몰라도 기본 폰트로 Menlo-like 폰트들을 제공한다. 폰트 바꿀 필요는 없을 것 같다.

티스토리 CSS