Please Enable JavaScript!
Gon[ Enable JavaScript ]

티스토리 하일라이트(highligth) 코드 블럭 디자인 라인번호, 줄번호 추가하는 방법

 

환경: Chrome

 

블로그에 추가한 코드를 보기 편하게 디자인해 주는 하일라이트를 설치해서 적용했지만 줄 번호가 없어서 아쉬웠습니다. 기존 하일라이트를 제공해 주는 사이트에서는 줄 번호 관련 옵션이 없습니다. 자신이 직접 구현을 하거나 구현된 소스를 가져가 쓰는 수 밖에 없습니다. 다행히 쉽게 라인번호를 추가할 수 있도록 Github 에 소스를 공유하신 분이 있더군요.

 

라인번호 없이 순수하게 하일라이트만 적용한 결과입니다. 여기에 라인번호를 추가할 것입니다.

티스토리 하일라이트(highligth) 코드 블럭 디자인 라인번호, 줄번호 추가하는 방법

 

라인 번호 추가가 가능한 jjavascript 를 개발해서 배포하신 분이 있습니다. Github 주소는 다음과 같습니다. 아래에 보시면 설명이 나와 있지만 제가 요약해서 테스트 한 결과를 공유하겠습니다.

https://github.com/wcoder/highlightjs-line-numbers.js/

티스토리 하일라이트(highligth) 코드 블럭 디자인 라인번호, 줄번호 추가하는 방법

 

먼저 아래 소스를 <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> 태그 안에 삽입합니다. 

티스토리 하일라이트(highligth) 코드 블럭 디자인 라인번호, 줄번호 추가하는 방법

 

다음은 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> 태그 안에 삽입합니다. 

티스토리 하일라이트(highligth) 코드 블럭 디자인 라인번호, 줄번호 추가하는 방법

 

결과는 다음과 같습니다. 왼쪽에 라인번호가 표시되는 것을 확인할 수 있습니다. 

티스토리 하일라이트(highligth) 코드 블럭 디자인 라인번호, 줄번호 추가하는 방법

Posted by 녹두장군

댓글을 달아 주세요