1. 코드 가독성을 높여주는 highlight.js
어제 블로그에 카카오링크를 적용하는 작업을 했는데, 공유하려고 했습니다. 근데 그전에 구글블로거에서 코드형식용 서식을 기본으로 제공하고 있을리 없으므로, 공유하기 전에 하이라이트 기능을 만들어 줘야 하겠다는 생각에 찾아봤습니다. 그 결과 highlight.js를 적용하는데 있어서 크게 2가지가 있는듯하여 정리해 봅니다.
2. highlightjs.org 방법
첫째, highlight.js이라는 사이트에 있는 방법입니다. 이 페이지에 가면 메인화면에서 데모를 돌려서 아웃풋을 미리 확인해 볼 수 있습니다. language, style를 클릭하면 화면이 바뀌면서 데모를 보여줍니다. 마음에 드는 스타일이 정해지면, "Get Version"을 클릭하면 소스화면으로 넘어가는데, 그것을 블로그 테마에 적용시켜 주면 됩니다. 근데 적용할때 소스수정이 필요합니다. 데모화면에서 나온 style명을 href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css" 부분의 default에 덮어쓰기 해줘야 합니다.
이 방법의 장점은, 언어의 구성요소에 따라서 컬러풀하게 나와서 코드자체의 가독력이 매우 좋다는 점 입니다. 단점은 줄인식이 조금 불편하다는점.
적용은 html 의 head부분에 하기 코드를 삽입하면 됩니다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css"></link>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.highlightAll();</script>3. 깃허브 highlightjs 방법
관련 안내중에 깃허브에 나온 내용은 약간 다릅니다. highlightjs Github에 들어가면 약간 코드도 다른데, 딱히 소스내용을 수정하거나 할 필요는 없습니다. 좋은 점은 줄무늬가 바탕이라 줄간격 을 인식 하기 쉽다는 점입니다. 줄번호가 있으면 가장 좋겠지만, 차선책으로 줄무늬가 있으면 좋겠다고 바라게 되는데 이 방법으로 적용할 수 있습니다. 단점은 코드색깔이 단색이라는 점입니다.
적용방법은 html 의 head부분에 하기 코드를 삽입하는 것입니다.
<link rel="stylesheet" href="/path/to/styles/default.css"></link>
<script src="/path/to/highlight.min.js"></script>
<script>hljs.highlightAll();</script>결론. 글쓸때는
가로 스크롤바가 깃허브 방법에서는 안나오더라구요...어째서일까요...모니터가 충분히 크지 않으면 코드가 잘려보이는데, 전체 코드 확인이 안되면 이런 툴도 의미가 없어집니다. 사실은 컬러풀한 것 포기하고 줄무늬를 선택하고 싶었지만, 가로 스크롤바가 없다는 점은 치명적이기때문에 결국 전자의 방법을 선택했습니다.
글 쓸때는
1) 해당 코드를 html에디터에서 <pre><code>....</code></pre> 형태로 작성해야합니다.
2) 코드안에 쓰인 특수부호는 Escape 해줘야 합니다. 따옴표, 격자 등등을 코드로 바꾸어 주어야 태그가 씹히지 않습니다. 하나하나 하는게 귀찮으니 Escape해주는 페이지(accessify.com)도 있습니다.
