tistory 코드 블록 line number 적용

1 js 파일 다운로드

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

js 파일을 오픈소스로 공유해주는 개발자가 있다.
highlightjs-line-numbers.js 파일을 다운로드한다.

위의 링크로 들어가 raw로 소스코드를 날것의 상태로 한 후,

우클릭 => 다른 이름으로 저장을 통해 파일을 다운로드할 수 있다.

2 업로드

블로그 관리 > 스킨 편집 > html 편집 > 파일 업로드 에 위에서 다운로드한 파일을 업로드한다.

3 html > head 추가

<!-- line number -->
<script src="./images/highlightjs-line-numbers.js"></script>
<script> hljs.initLineNumbersOnLoad();
    $(document).ready(function() {
        $('code.hljs').each(function(i, block) {
        hljs.lineNumbersBlock(block);
        });
    });
</script>

코드를 추가한 결과 이미지

4 CSS 추가

/* line numbers */
.hljs-ln td.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;
/* your custom style here */
}
/* for block of code */
.hljs-ln td.hljs-ln-code {
padding-left: 10px;
}

 

 

 

 

 

---

참고: https://blog.iroot.kr/346