highlightjs 사용법

이전에 highlightjs 가 어느정도 좋은 구문강조 자바스크립트인지 알아보았습니다.
이걸 티스토리에 적용하는 방법과 테마에 대해서 알아보겠습니다.

티스토리에 적용하기

티스토리에 적용하려면 먼저 홈페이지에서 파일을 다운로드 받습니다.

highlightjs 홈페이지 다운로드 - http://highlightjs.org/download/

압축을 풀면 많은 파일이 나옵니다.
필요한 파일은 highlight.pack.js 과 css 파일입니다.

먼저 자바스크립트인 highlight.pack.js 를 업로드 하세요.
그리고 사용하고자 하는 css 파일을 업로드하세요.
파일은 style 폴더 안에 있는 아무 파일이나 사용하고자하는 css파일 하나만 업로드하면 됩니다.

이제 스킨 편집에 가셔서 html을 수정합니다.

css 는 아래처럼 추가해줍니다.
예제는 github.css 파일로 합니다.

<head>
.....
<link rel="stylesheet" href="./images/github.css">
....
</head>

css 는 반드시 head안에 넣어야 합니다.
다음은 스크립트파일인데요 이것은 바로 위에 넣습니다.

......
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
....
</body>

그러면 설정은 끝났습니다. 만약 jQuery 를 사용하고 있다면 아래처럼 사용하는것이 더 좋습니다.

......
<script src="./images/highlight.pack.js"></script>

<!-- 
티스토리의 본문은 대부분 entry 클래스를 가진 div 안에 넣습니다.   
그래서 entry 안에 있는 pre를 선택한겁니다. 
-->
<script>$('.entry pre').each(function(i, e) {hljs.highlightBlock(e)});</script>
....
</body>

테마 사용하기

highlightjs 는 테마가 정말 많습니다.
저도 sublimetext 를 사용하기때문에 monokai_sublime 테마와 github 테마중 어떤걸 사용할지 갈등을 많이 했을 정도 입니다.

style 폴더에 보면 이미지가 3장이 있습니다.
배경으로 사용하는 이미지인데요 테마마다 사용하는 경우가 있습니다.

해당 파일을 업로드하고 head 부분에 업로드한 파일명만 변경하면 됩니다.
위에서는 github.css 를 올렸다면 이번에는 monokai_sublime.css 로 변경했다고 가정하면 아래와 같습니다.

<head>
.....
<link rel="stylesheet" href="./images/monokai_sublime.css">
....
</head>

어떤 테마를 사용할지 고민이시라면 홈페이지의 테마를 미리보기할수 있습니다.
테마명을 클릭하면 변경된 테마를 볼 수 있습니다.

테마 사이트 -> http://highlightjs.org/static/test.html