이전 포스트에서 예고(?)한대로 이번 포스트는 code syntax highlighter다.
먼저 뜬금없지만 code syntax highlighter가 우리말로 뭘까? 코드는 코드고... 코드는 코드고. 구글 번역기가 말해주기를 "코드 구문 형광팬"이란다. 나름 확 와닿기는 한다.
그럼 본론으로 들어가자. 역시 직접 만들 이유가 없으면 갖다 쓰는 것이 아름답기에 갖다 쓰자. 😜
highlight.js와 Prism.js 사이에서 고민을 했다. 기능이나 지원은 자세히 알지 못하는 나에겐 비슷해 보인다. 결국 highlight.js를 선택했다. 이유는 얼토당토않겠지만 홈페이지가 더 깔끔했기 때문이다. 그렇다. 슬프게도 나에겐 아직 그 둘을 구분할 능력이 없는 것이다.
코드가 포함된 블로그는 다음과 같다.
6개 밖에 되지 않다니 의외다. 다 고쳤다. 넣어야 하는 건 많지 않다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/tomorrow-night-bright.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>근데 마지막 줄이 비어 보이는 건 나의 착각인가? 버그인가? 피처인가? 마지막 줄은<script>hljs.initHighlightingOnLoad();</script> 이건데.
code 태그에는 language-html과 같이 언어를 적은 클래스를 넣으면 된다.
highlight.min.js는 인기 언어들만 지원한다. 즉, OCaml을 쓰고 싶으면 다른 이름의 자바스크립트를 따로 받아야 한다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/ocaml.min.js"></script>줄번호를 어떻게 넣는지 궁금하여 찾아봤더니 없는 것이 피처다. 나이스!
highlightjs.readthedocs.io/en/latest/line-numbers.html
그 전이랑 달라진 건 이것이 <pre><code>를 찾아서 몽땅 색을 칠하려 한다는 것이다. 클래스가 없을 때에도. 그러니 페이지가 다 읽어지면 얘는 색을 칠하려 할 것이고 꼬멘트는 댓글을 달으려 할텐데, 혹시 댓글에 <pre><code>가 있으면 순서에 따라 어떤 땐 색이 칠해지고 어떤 땐 안 칠해질 것이다. ㅎㅎㅎ non-deterministic한 코드 색칠이라니. 아마 웬만하면 색이 안 칠해질 것이다. 꼬멘트는 서버랑 통신을 또 해야 돼서.
그렇다고 두 스크립트 사이의 순서를 강제하기도 사실 좀 귀찮다. 댓글에 색칠을 할 거면 꼬멘트 함수에 콜백을 넘겨 주어야 할 것이고, 색칠을 안 할 거면 highlight.js에게 콜백을 넘어 주어야 할 것이다. 어느 쪽이든 함수를 뜯어 고쳐야 하는 것이다.
2020-04-23 씀.