티스토리에 코드구문강조(highlight.js) 설치하기

티스토리에서 코드 구문 강조를 위하여 많이 사용되는 것이 Syntax Highlighter 일 것이다.

그런데, 티스토리에 막상 적용할려하면 각종 브러쉬 파일들을 올려둬야 하고 에디터에 소스 입력시 일일이 brush:언어를 일일이 지정해주는건 나에게 너무 귀찮다...

그래서 쓸만한 코드구문강조를 찾아보던중 highlight.js를 찾게 되었다.


website : https://highlightjs.org/


사이트 설명에는 169가지 언어와 77개의 스타일을 지원한다고 한다.

그리고 결정적으로 이걸로 하게된게 소스코드를 올리면 언어를 별도로 지정할 필요 없이 알아서 분석해서 코드 구문 강조를 해준다.


이제 티스토리에 적용해보자.

우선 관리페이지 -> HTML/CSS 편집 에 들어가서 html의 <head>와 </head> 사이에 아래의 코드를  추가한다.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/monokai-sublime.min.css">


monokai-sublime.min.css는 스타일 파일로서 다른 스타일을 원하면 https://highlightjs.org/static/demo/ 를 참고한다.

css를 추가하였다면 </body> 태그 바로 위에 아래의 코드를 추가한다.

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

이제 모든 준비는 끝났다.
코드 작성시 에디터에서 HTML에 체크 후 아래의 코드를 입력해주면 적용된다.
<pre><code> 코드 작성 </code></pre>


+보너스

highlight.js는 줄번호 표시가 없다.

그래서 누군가 github에 줄번호 표시가 되게 만들어 놓은 소스가 있다.


highlightjs-line-numbers.js



위의 사이트에서 highlightjs-line-numbers.min.js를 받아서 티스토리에 업로드한다.

그리고 </body>태그 윗단에 기존에 추가했던 소스를 지우고 아래의 소스로 변경한다.


<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="./images/highlightjs-line-numbers.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>hljs.initLineNumbersOnLoad();</script>

CSS 수정으로 들어가 소스를 추가한다.

.hljs-line-numbers {
    text-align: right;
    border-right: 1px solid #ccc;
    color: #999;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

-끝-

TAGS.