ΛneOK v4 blog

일상의 잡다한 생각과 내용을 글 또는 사진으로 표현하는 일상 블로그입니다.

# Side Menu

recentPost
popularPost
Archive
recentComment

티스토리 코드블럭에 라인번호 붙히기 (Line Number)

2021. 4. 10., AneOK

티스토리에 글을 작성하다 보면 코드블럭에 코드를 입력하고 가독성을 높이기 위해 Highlight.js를 적용하고 있습니다. 하지만 라인번호(Line Number)가 없어 아쉬움이 있었는데 'highlightjs-line-numbers.js'를 적용하시면 라인번호도 출력이 됩니다. 긴코드에서는 장점이죠~

그래서 이번에 적용된 부분을 정리 했습니다.

다운로드

선 적용 다운로드 : highlightjs.org/

highlight.js

Version 10.3.2 Tiny tiny release, just to fix the website incorrectly not listing Javascript in the list of languages you could choose for a custom build. There are no other changes.

highlightjs.org

위 사이트에 가서 자신에게 맞는 부분을 체크하여 다운로드 하시면 됩니다.

새 에디터의 코드블럭을 사용하시면 그냥 위의 highlightjs.org부분은 넘기셔도 됩니다. 적용중 파일 업로드는 밑에 부분과 비슷하여 생략 하겠습니다.

다운로드: github.com/wcoder/highlightjs-line-numbers.js

wcoder/highlightjs-line-numbers.js

Line numbering plugin for Highlight.js . Contribute to wcoder/highlightjs-line-numbers.js development by creating an account on GitHub.

github.com

이 포스트에서 필요한것은 highlightjs-line-numbers.min.js 파일로 위의 사이트에서 다운받습니다.

아니면 이 블로그에서도 다운 가능합니다. (되도록이면 위의 사이트에서 다운하시는걸 추천합니다.)

highlightjs-line-numbers.js-master.zip

0.08MB

다운이 완료되고 압축을 풀고 그 폴더에서 /dist 안에 파일이 있습니다.

적용 방법

파일 업로드

티스토리 관리자 페이지에 로그인
관리자 > 꾸미기 > 스킨편집 > Html 편집 > 파일업로드 선택 > 'highlightjs-line-numbers.min.js' 업로드
정상적으로 업로드 되면 리스트에 표시됨(highlight.js 파일도 업로드합니다)

HTML 코드

HTML편집 > HTML <head>와 </head> 사이에 다음 코드를 적용합니다. </body>위에도 사용가능합니다. 물론 이 부분을 사용 할려면 JQuery를 사용할 수 있어야 됩니다.

hljs.highlightAll(); // highlight.js를 사용하기
hljs.initLineNumbersOnLoad(); // highlight.js 라인 번호 플러그인 사용
$(document).ready(function() {
  $('code.hljs').each(function(i, block) {
    hljs.lineNumbersBlock(block);
  });
});

공식 CSS부분은 링크에 가시면 있고 밑의 css는 제가 사용하는 부분입니다.

.hljs {
  white-space: pre;
}
.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;
  color: #999;
  vertical-align: top;
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right
}

.hljs-ln td.hljs-ln-code {
  padding-left: 10px
}

간단히 border을 뺀 코드입니다. 물론 티스토리의 table부분의 css를 수정해 줘야 합니다. 그리고, 지금 사용하는 highlightjs v10.7.2버전에는 .hljs부분에 overflow-x: auto;는 적용되어 있어서 적지 않았습니다.

저의 경우에 사용하는 table부분입니다. 저의 경우이지 이것이 정답은 아닙니다.

thead, tbody, tfoot, tr, td, th {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}

이상으로 highlightjs nember부분입니다. 사실 없어도 크게 지장은 없지만 있으면 보기에 더 좋아 적용한 것입니다.