티스토리에 글을 작성하다 보면 코드블럭에 코드를 입력하고 가독성을 높이기 위해 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 파일로 위의 사이트에서 다운받습니다.
아니면 이 블로그에서도 다운 가능합니다. (되도록이면 위의 사이트에서 다운하시는걸 추천합니다.)
다운이 완료되고 압축을 풀고 그 폴더에서 /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부분입니다. 사실 없어도 크게 지장은 없지만 있으면 보기에 더 좋아 적용한 것입니다.