티스토리 블로그 코드 작성 - Highlight.js

2016. 1. 30. 15:54

최근에는 블로그가 상당히 활성화되면서 맛집이나 상품, 홍보에 목적을 둔 블로그와 더불어 프로그래밍과 관련된 블로그 공급이 꾸준히 증가하고 있다. 필자 역시 공부한 내용을 정리하는 목적과 다른 사람들과 공유하고자 하는 목적에서 블로그를 시작했다. 그러나 기본적으로 제공되는 HTML/CSS 속에서 가독성 있는 코드를 작성하기란 쉽지 않다. 이런 문제점을 겪는 것이 비단 나뿐만은 아닐 것이라 생각하여 검색해보니 쉽게 답을 찾을 수 있었다. 검색 결과로 몇 가지 방법을 찾을 수 있었으나, 가장 간단했던 Highlight.js를 이용한 방법을 소개하고자 한다. 컴퓨터 전공이 아니더라도 간단한 HTML/CSS 편집은 크게 어려운 점이 없으니 따라해보면 쉽게 적용할 수 있을 것이라 생각한다. 블로그에 코드를 작성하는 사람들에게 도움이 되었으면 좋겠다.

1. 소개

Highlight.js는 파일 확장자에서 파악할 수 있듯이 자바스크립트로 작성된 코드 작성용 라이브러리다. 홈페이지를 통해 무료로 다운받아서 업로드하는 형식 또는 CDN(Contents Delivery Network)을 통해 끌어와서 사용하는 방법이 있다. CDN 방식을 이용하면 몇 가지 단점을 지니지만 간편하게 적용할 수 있으니 이 방법을 통해 진행하고자 한다.

2. 설정

티스토리 블로그 관리 → HTML/CSS 편집창에서 HTML 파일의 <head></head> 영역 사이에 아래의 코드를 삽입해도록 하자. 애매한 위치에 삽입할 경우 후에 알아보기 어려울 수 있으므로 </head> 바로 앞에 삽입하는 것을 추천한다. 삽입 후 바로 적용가능하도록 작성해놨기 때문에 복사해서 붙여넣으면 간단히 적용할 수 있을 것이다.

코드에서 주목할 만한 부분은 첫 번째 라인에 bold체로 표기된 default.min.css 부분이다. Highlight.js는 다양한 언어에 맞게 혹은 각종 IDE에 따라 제공되는 테마를 제공한다. 따라서 이 부분을 원하는 테마로 변경해주면 적용할 수 있다. 기본적으로 default.min.css로 작성했지만 데모 페이지에서 다양한 테마를 확인할 수 있으므로 자신에 취향에 맞는 테마 선택하여 첫 번째 라인에 default.min.css를 변경해주자.

3. 코드 작성

블로그에 글을 작성할 때 Highlight.js를 이용하기 위해서는 HTML 모드에서 다소 귀찮은 과정을 진행해야 한다. 기본적으로 코드는 아래에 [코드 입력 부분]에 기재하면 된다.

그런데 HTML 모드에서 '<' 또는 '/'과 같은 특수문자 처리가 원하는대로 안되는 경우가 발생하는데 이를 수정해줘야 깔끔하게 코드를 작성할 수 있다. 때문에 문제되는 부분을 HTML 특수문자 코드표를 확인한 뒤 문제되는 특수 문자를 치환해주자. 웹에서 글을 작성할 때에는 모든 문자를 한 번에 바꾸는 기능을 제공하지 않는 경우가 많아서 여간 귀찮은 일이 아니다. 따라서 애용하는 IDE 혹은 메모장 같은 텍스트 편집기에서 일괄적으로 변경해주면 편하게 작업할 수 있다.

4. 확인

필자는 텍스트편집기로 sublimetext를 가장 선호해서 해당 테마로 설정해봤다. 위에서 설정했던 코드에서 default.min.css → monokai_sublime.min.css로 변경했으며, '<' 또는 '>'와 같은 특수문자들을 코드표를 보고 치환해주었다. 결과적으로 아래의 코드화면을 확인 할 수 있다.

<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.7/styles/monokai_sublime.min.css">
<script src="//cdn.jsdelivr.net/highlight.js/8.7/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

[참고 자료]

http://egloos.zum.com/keep/v/1030642

https://highlightjs.org/static/demo/

http://webdir.tistory.com/439

저작자표시 비영리 변경금지

NamTech

티스토리 블로그 코드 작성 - Highlight.js

티스토리툴바