티스토리 코드블럭 Highlight 줄 번호 적용하는 방법

안녕하세요. RootKR입니다.

 

 

Highlight 코드 강조 라이브러리를 적용하면 위 사진처럼 나오는데, 줄 번호(line number)은 나오지 않아서 아쉽더군요.

 

찾아보니 개발자 Yauheni Pakala가 만든 highlightjs-line-numbers 자바스크립트를 사용하면 된다고 합니다.

 

 

티스토리 블로그 관리에서 꾸미기 메뉴의 "스킨 편집" 텍스트를 클릭해서 HTML 편집으로 들어가 주세요.

 

</head> 태그 위에 아래 소스를 복사 붙여넣기 해 주세요.

 

Cloudflare CDN 사용을 원치 않는 분들은 2번째 소스를 삽입해주시고 highlightjs-line-number.js를 다운받아서 파일 업로드해주세요.

 

<!-- Highlight Line Number JavaScirpt - Cloudflare CDN 사용 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad(); $(document).ready(function(){$("code.hljs").each(function(c,e){hljs.lineNumbersBlock(e)})});</script>

 

<!-- Highlight Line Number JavaScript - 티스토리 파일 직업 업로드 -->
<script src="./images/highlightjs-line-numbers.js"></script>
<script>hljs.initLineNumbersOnLoad(); $(document).ready(function(){$("code.hljs").each(function(c,e){hljs.lineNumbersBlock(e)})});</script>

 

Highlight Line Number JavaScript 다운로드 : https://github.com/wcoder/highlightjs-line-numbers.js/tree/master/src

 

 

HTML 소스 삽입이 끝나셨다면 상단에 위치한 "CSS" 텍스트를 클릭해주시고 CSS 마지막 부분에 아래 소스를 복사 붙여넣기 해 주세요.

 

/* for block of 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;
}

 

 

HTML와 CSS 소스 삽입이 끝나셨다면 Highlight 코드블럭이 포함된 게시물 들어가서 확인해보시면 위 사진처럼 줄 번호(Line Number)가 나옵니다.

 

나오지 않는다면 크롬 브라우저 기준으로 Ctrl + F5 눌러보시면 됩니다.