[Tistory] hELLO 스킨 코드 라인 번호 추가(line-number 추가)

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

GitHub - wcoder/highlightjs-line-numbers.js: Line numbering plugin for Highlight.js

---

티스토리 hello스킨 코드 라인줄 추가하는 법

HTML 편집 모드

body 안에 넣어준다.

<script defer src='//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js'></script> 
<script> 
    window.onload = function() { 
        hljs.highlightAll(); 
        hljs.initLineNumbersOnLoad() 
	} 
</script>

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;
}