티스토리 코드블럭 Highlight.js에 Line Number 적용하기
안녕하세요.
티스토리에 글을 작성하다 보면 코드블럭에 코드를 입력하고 가독성을 높이기 위해
Highlight.js를 적용하고 있습니다.
하지만 라인번호(Line Number)가 없어 아쉬움이 있었는데 highlightjs-line-numbers.js를 적용하시면 라인번호도 출력이 됩니다.
▼ highlightjs-line-numbers.js 다운받기
https://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.js 업로드
관리자 > 꾸미기 > 스킨편집 > Html 편집 > 파일업로드 선택
① 파일업로드
② 다운받은 highlightjs-line-numbers.js 파일 추가
③ 정상적으로 업로드 되면 리스트에 표시됨
▼ HTML 코드 적용
html편집 > HTML <head>와 </head> 사이에 다음 코드를 적용한다.
<!-- highlight 적용 -->
<script src="./images/highlight.pack.js"></script>
<script src="./images/highlightjs-line-numbers.js"></script>
<link rel="stylesheet" href="./images/tomorrow-night.css" />
<script>
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();
$(document).ready(function() {
$('code.hljs').each(function(i, block) {
hljs.lineNumbersBlock(block);
});
});
</script>
.hljs
{
white-space: pre;
oerflow-x: auto
}
.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 !important;
}
.hljs-ln td.hljs-ln-code {
padding-left: 10px;
}적용 후 에 확인을 해보니 다음과 같이 Table 형태가 나오는데 확인 결과
스킨에 따라 이렇게 나오는 경우가 많은듯 하다.
소스보기 확인 결과 본문에 table 태그가 다음과 같이 존재하며 highlightjs-line-number.js에서 table 태그를 활용해
라인을 표시하는듯 합니다.
본문에 표를 안쓰신다면 . entry-content table 관련 스타일을 삭제해주시거나
아래와 같이 본문에 바로 표가 나왔을 때만 적용해주시는것도 방법입니다.
감사합니다.