티스토리 Code Highlight 적용하기 + LineNumber 추가(hELLO 스킨 사용)

티스토리 기본 코드 블럭이 마음에 들지 않았습니다. 특히 lineNumber가 보이지 않는 점 때문에 게시글 작성했을 때, 몇 번째 줄을 참고하세요~ 라고 작성해서 블로그를 방문한 개발자들이 빠르게 무언가 찾아서 얻어 가는 게 힘들다고 생각이 들었습니다.
커스텀한 코드블럭을 사용하기 위해서 서치를 진행하면서 highlightjs 라는 javascript 기반으로 적용할 수 있는 코드 블럭 스타일링 및 여러 유틸 기능을 제공하는 라이브러리를 알게 됐습니다.
여러 자료를 찾게 되었고 그걸 적용하는 단계에서 버전이 달라 에러가 났고 이를 해결한 코드를 공유하고자 글을 남기려고 합니다.
해당 글은 2024 - 08 -27일 기준으로 작성했니다. 
highlight.js 버전은 npm 기준 @11.9
hELLO 스킨 버전 4.X 
highlightjs-line-numbers.js 버전 npm 기준 @2.8

https://highlightjs.org/

highlight.js

 

 

1. highlight.zip 다운로드

js로 다운로드

 

 

제가 CDN 방식으로 스크립트 넣는 것이 아니라 티스토리에 JS 파일로 저장하는 것을 선택한 이유가 있습니다. CDN 주소의 변경 가능성이나 라이브러리가 미지원된다면 CDN 주소도 사라질 가능성이 있어요.. 그래서 보통의 경우로 해결 된다면 파일 형태로 다운로드하고 사용하는 편입니다.

zip 압축 해제 폴더 구조

 

이 중에서 styles폴더의 여러 테마 css와 highlight.min.js이 필요한 파일입니다. 테마의 경우 styles/devibeans.min.css 해당 파일을 사용하려고 합니다.

2. 티스토리에 다운로드 받은 js 업로드

티스토리 관리 > 꾸미기 > 스킨 편집 > HTML 편집을 클릭하면 이런 화면이 등장합니다.

업로드할 파일명

 

이제 화면 업로드로 이동해주세요.

 

업로드할 파일명

 

저는 devibeans.min.css 의 기본 hightlight 테마를 골라서 사용하기로 했습니다. 다른 분들도 여러테마 살펴보고 기본 css를 선택해주세요.

 

3. HTML 편집 및 CSS 수정 

3.1. HTML 수정

이제 HTML 수정을 해야합니다. 우선 head에 스크립트를 import 해줍니다.

 

스크립트 import

 

 

    <script src="./images/highlight.min.js"></script>
    <link rel="stylesheet" href="./images/devibeans.min.css">

 

해당 태그를 head 태그 안에 복사 붙여넣기 합니다.

 

마지막 태그 추가

 

그리고 </body> 태그가 끝나는 지점 아래에 추가해줍니다.

<script> 
    window.onload = function() {
      hljs.highlightAll();
      //initLineNumbersOnLoad 나중에 주석을 풀어줍니다.
      //hljs.initLineNumbersOnLoad()
    }
  </script>

 

 

3.2.1. CSS 수정

 

css 수정에서 pre code를 검색하여 pre code.hljs 부분에 background-color를 설정하거나 코드 블럭의 border-redius를 설정하는 등 css를 추가할 수 있습니다.

그러면 이제 hightlight가 제대로 동작하는지 확인해주세요!.

 

3.2.2. 해당 css를 마지막 줄에 추가해주세요

/* for block of numbers */
#content .hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    color: #ccc;
    border-right: 1px solid #CCC;
    vertical-align: top;
    padding-right: 5px;
}
 
/* for block of code */
#content .hljs-ln-code {
    padding-left: 10px;
}

hightlight 적용 중

 

4. 코드 블럭에 line 추가.

해당 깃허브 주소로 이동해서 window기준 컨트롤 + 쉬프트 + s 를 누르면 해당 js 파일이 다운로드 됩니다.

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

highlightjs-line-numbers.js/src/highlightjs-line-numbers.js at master · wcoder/highlightjs-line-numbers.js

 

아까와 같이 다운로드 받은 파일을 업로드 해줍니다.

파일 업로드

 

이 후 </body> 밑에 스크립트를 등록합니다.

 

  <script defer src="./images/highlightjs-line-numbers.js"></script>

initLineNumbersOnLoad() 추가

 

 

이제 코드블럭이 보이고 블로그에 적용이 완료 됐습니다.

 

 

5. 참고자료

https://tuttozurich.tistory.com/19

[Tistory] Code Highlight 적용하기 (hELLO 스킨 사용시 에러 해결)

https://wouldyou.tistory.com/105

[tistory] 티스토리 hELLO 스킨 변경, highlight-line-number추가