highlight.js line-numbers 설정방법

highlight.js line-numbers 설정방법

사진 = IT러쉬맥닷넷 캡처

highlight.js에 라인번호(Line Number) 설정하는 방법 알려드립니다.

적용방법

먼저,

https://github.com/wcoder/highlightjs-line-numbers.js/에서 highlightjs-line-numbers.js 파일 다운로드 합니다.

해당 파일(highlightjs-line-numbers.js) 첨부하였습니다.

---

highlightjs-line-numbers.js

0.01MB

---

highlightjs-line-numbers.js 파일 대해 티스토리 기준(스킨편집] -> [파일업로드]) 업로드 합니다.

 

[스킨편집] -> [Html 편집] -> [CSS]에서 맨 마지막 줄에 다음과 같이 코드 추가 합니다.

/* for block of numbers */
.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-code {
    padding-left: 10px;
}

---

CSS_맨마막줄에입력.txt

0.00MB

---

CSS에 맨 마지막줄에 적용한 화면

 

 

[스킨편집] -> [Html 편집]에서  jQuery 적용 코드 입력 합니다.

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

---

html_Head안에.txt

0.00MB

---

최종화면

 

이전 글 참고자료(highlight.js 적용방법)

2019/10/25 - [Developers/Dev_Etc[기타]] - highlight 적용하는 방법(코드 구분 강조)

highlight 적용하는 방법(코드 구분 강조)