티스토리에 highlighter.js 적용하기

 

 

 

안녕하세요 불탄오징어입니다.

 

(highlighter 적용하는 방법을 알려주는게 아니라 본인의 삽질기임)

 

 

간간히 Python이나 Spotfire 관련 블로그를 올리다 보면 Script를 쓰곤 하는데 기존에는 Syntax Highlighter를 사용하고 있었습니다. 최근에 블로그 스킨을 바꾸고 나서 기존에 적용했던  Syntax Highlighter 가 작동하지 않았습니다.

 

 

아예 적용하지 않던 것을 어떻게 적용해놨더니 라인이 없어지거나 "?"가 위에 떠있거나...

 

검색도 하고 나름 연구도 해보기를 2 주정도 진행하고 그냥 포기 상태네요. 다음에 기회가 되면 좀더 연구를 해보겠지만 쉽지 않네요.

 

마지막으로 일부 적용됐던 설정

 

 

결국 다른 것을 찾기로 결정해서 Highlighter.js를 적용해보았습니다. 먼저 Highlighter.org로 이동해서 파일을 다운받습니다.

 

 

 

다운을 받고 압출을 풀면 아래와 같이 구성이 되어있습니다. 

 

 

 

 

그럼 티스토리 관리 모드로 들어갑니다.

 

 

 

관리 메뉴에서 꾸미기 - 스킨 편집을 클릭한 후 html 편집을 클릭합니다.

 

 

먼저 원하는 스타일의 css 파일과 highlighter.pack.js 파일을 업로드합니다. 저는 dracula.css 파일을 선택했습니다.

 

 

 

 

html 탭에서 </head> 앞에 스크립트를 붙여 넣습니다.

 

<link rel="stylesheet" href="./images/dracula.min.css">
<script src="./images/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

 

적용 눌러서 변경 분을 모두 반영합니다. 그 후에 티스토리 글쓰기 에서 우측상단의 ... 을 클릭하고 코드블럭을 클릭합니다.

 

 

그러면 아래와 같은 입력창이 뜹니다. 

 

 

언어를 선택 한 후 스크립트 작성 및 확인 하게 되면 이쁘게 highlighter가 적용된 것을 확인 할 수 있습니다. 있다고 합니다. 그런데 저는 적용이 안되네요.. 이유를 모르겠습니다. 

위의 방법은 js 파일을 다운 받아 적용시킨 방식인데 cdn에서 가져와서 적용하는 방법을 사용했습니다.

 

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/dracula.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

 

Syntax Highlighter의 경우 기본적으로 라인번호가 뜨는데 highlighter.js는 라인번호가 없습니다. 

 

https://github.com/wcoder/highlightjs-line-numbers.js

wcoder/highlightjs-line-numbers.js

 

위 링크로 가서 highlightjs-line-numbers.js 파일을 다운 받습니다.

 

 

 

해당 파일을 티스토리 images 폴더에 업로드를 한 후 CSS 탭에서 맨 밑에 아래 내용을 첨부합니다.

 

/* for block of numbers */
.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;
}

 

 

그 후에 highlighter.js를 적용시켰던 부분에서 아래 내용을 추가합니다.

 

<link rel="stylesheet" href="./images/dracula.min.css">
<script src="./images/highlight.min.js"></script>
<script src="./images/highlightjs-line-numbers.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>hljs.initLineNumbersOnLoad();</script>

 

업로드해서 적용되는 경우는 이렇게 하면 되고 저같은 경우는 똑같이 cdn을 활용하여 최종적으로 아래와 같이 적용했습니다. 

 

<!--highlightjs-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/dracula.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>hljs.initLineNumbersOnLoad();</script>

 

cdn을 활용하는 경우 언어의 제한이 있기 때문에 아쉬운점이 많네요. 급한데로 쓰고 있긴한데 syntaxhighlighter 적용이 복구되는데로 다시 돌아갈 것 같습니다.