티스토리 코드블럭에 Highlight.js 적용

2019년 4월 현재 새로운 에디터가 나온 이후로 코드블럭을 이용해서 코드를 입력한 뒤에

해당 코드에 지원 언어(특히 VB같은)의 범위를 넓히고 앞에 라인넘버를 추가하는 방법입니다.

(SyntaxHighlighter 가 Editor에서만 적용되고 잘 적용되지 않아 Highlight.js를 이용하게 되었습니다.)

1. https://highlightjs.org/download/ 에서 highlight.js 핵심 js 와 원하는 style 다운로드

현재 스킨편집 - HTML편집 - 파일업로드에서 모두 업로드(폴더내의 여러파일들은 쉬프트키로 다중 선택 업로드)

2. 줄번호추가를 위한 js 또한 다운받아 위와 마찬가지로 업로드

다음 링크를 다른이름으로 저장: https://github.com/wcoder/highlightjs-line-numbers.js/blob/master/dist/highlightjs-line-numbers.min.js

3. 스킨 HTML편집에서 아래 내용을 </Head> 바로 위에 추가

(아래 googlecode.css 를 자신이 원하는 스타일로 변경)

<!-- 코드 하이라이트 -->
<script src="./images/highlight.pack.js"></script>
<link rel="stylesheet" href="./images/googlecode.css">
<script>hljs.initHighlightingOnLoad();</script>

<!-- 코드 블럭 라인 넘버 표시 -->
<script src="./images/highlightjs-line-numbers.min.js"></script>
<script> hljs.initLineNumbersOnLoad();
$(document).ready(function() {
$('code.hljs').each(function(i, block) {
hljs.lineNumbersBlock(block);
});
});
</script>

4.CSS 편집에서 아래 내용을 마지막정도에 추가

/* for block of numbers */
.hljs-ln-numbers {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #666666;
vertical-align: top;
padding-right:5px !important;
/* your custom style here */
}
/* for block of code */
.hljs-ln-code {
font-family: "consolas";
padding-left: 10px;
/*color:white;*/
}

5. 최종 적용

새로운 에디터에서 글 작성시 코드블럭을 적용해서 작성하면 자동으로 언어를 인식해서 색깔을 바꿉니다.

자동으로 안될 경우는 글 수정에서 HTML모드로 바꾸고 class = html xml 을 찾아서

class = '해당언어별명' 으로 바꾸면 글자색상이 적용됩니다.

본 내용은 아래 사이트의 내용을 참고하여 수정, 요약한 글입니다.

참고사이트: https://plorence.kr/446