티스토리 하일라이트(highligth) 코드 블럭 디자인 라인번호, 줄번호 추가하는 방법
|
티스토리 하일라이트(highligth) 코드 블럭 디자인 라인번호, 줄번호 추가하는 방법 |
|
환경: Chrome |
블로그에 추가한 코드를 보기 편하게 디자인해 주는 하일라이트를 설치해서 적용했지만 줄 번호가 없어서 아쉬웠습니다. 기존 하일라이트를 제공해 주는 사이트에서는 줄 번호 관련 옵션이 없습니다. 자신이 직접 구현을 하거나 구현된 소스를 가져가 쓰는 수 밖에 없습니다. 다행히 쉽게 라인번호를 추가할 수 있도록 Github 에 소스를 공유하신 분이 있더군요.
▼ 라인번호 없이 순수하게 하일라이트만 적용한 결과입니다. 여기에 라인번호를 추가할 것입니다.
▼ 라인 번호 추가가 가능한 jjavascript 를 개발해서 배포하신 분이 있습니다. Github 주소는 다음과 같습니다. 아래에 보시면 설명이 나와 있지만 제가 요약해서 테스트 한 결과를 공유하겠습니다.
https://github.com/wcoder/highlightjs-line-numbers.js/
▼ 먼저 아래 소스를 <head> 태그 안에 삽입합니다. 라인 번호를 추가할 js 파일과 script 소스가 들어갑니다. js 파일은 CDN 서버 링크를 통해서 가져옵니다. 직접 다운받아 추가하는 것보다 편할 겁니다.
<!-- 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(i, block) {
hljs.lineNumbersBlock(block);
});
});
</script>▼ 위의 소스는 <head></head> 태그 안에 삽입합니다.
▼ 다음은 CSS 를 복사해서 붙여 넣어야 합니다. CSS 의 내용은 다음과 같습니다.
<style>
/* 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;
}
</style>▼ 위의 소스는 <head></head> 태그 안에 삽입합니다.
▼ 결과는 다음과 같습니다. 왼쪽에 라인번호가 표시되는 것을 확인할 수 있습니다.
