[무작정 씨리즈] 코드블럭 하이라이트 2 - 라인넘버 설정하기!

코드블럭을 이쁘게 꾸며봤는데..

뭔가 허전한 느낌이 든다..

이클립스 처럼 줄 번호가 있으면 더욱더 그럴듯하게 보일텐데....

그래서!!

이번 포스팅은 코드블럭에 라인넘버를 추가 해보도록 하자!!!!!

 

highlightjs-line-numbers.js-master.zip

0.08MB

먼저 이 파일들을 다운받아주자!

압축을 풀어주고.

사진을 보면서 모두 업로드 해주자.

gulpfile.js

 

highlightjs-line-numbers.min.js

 

highlightjs-line-numbers.js

이 파일들인데..

스킨편집 탭에서 - HTML편집 - 파일업로드 순서로 들어와서 

모조리 다 업로드 해주자!

사실 모조리 업로드 하는건 아닌거 같지만... 무작정 씨리즈니까 일단 무작정 다 올리고보자..

 

업로드를 다 했다면,

	<!-- 코드 블럭 라인 넘버 표시 -->
<script src="./images/highlight.min.js"></script>
<script src="./images/highlightjs-line-numbers.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();
$(document).ready(function() {
    $('code.hljs').each(function(i, block) {
        hljs.lineNumbersBlock(block);
    });
});
</script>

위 코드를

저번 포스팅에서 붙여넣었던 곳 아래에 살포시 붙여넣어주자.

</head> 태그 바로 위에 넣어주어도 좋다.

이런식으로 붙여넣으면 끝!!!!

 

 

인줄 알고 적용을 누르고 코드블럭을 확인하러 간다면...

매우 당황스러울 것이다..

모양이 정말 그지같기 때문이다.

라인 넘버를 적어주는게 어디선가 듣기론 highlight.js의 기본 기능이 아니라

다른 능력자 분께서 table (표) 를 어찌어찌 해서 번호를 매기는 거라고 했다.

 

그래서 나는 표 기능을 쓸 일이 없다고 판단이 되어서 

그냥 주석처리 해버렸다...

 CTRL  +  F 

로 검색창을 띄운 다음 table 검색하고,

 CTRL  +  G 

로 다음 다음 다음 검색을 계속해서 

1300~1400번째줄 언저리에 있는 (스킨마다, 블로그 마다 다를 수 있다) 저기

표 기능을 모조리 주석처리 해주면 깔끔하게 적용이 된 것을 볼 수 있다.

 

한가지 더 알려주자면,

/* code bolck css space*/

/* for block of numbers */
.hljs-ln-numbers { /*찾아보면 나오겠지만 잘 몰라서 그냥 냅뒀다!*/
	  -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
		color: #666666;
    vertical-align: top;
    padding-right: 5px !important;

}

/* for block of code */
.hljs-ln-code {
    padding-left: 10px;
}
.hljs {
    display: block;
	white-space: pre; 
    overflow-x: auto; /* 코드가 길어지면 이상한 모양으로 나오는게 아니라 아래쪽에 스크롤이 생김 >>>>>>>>>>>>>>>>>> 이런식으로(붙여넣기 할때 이 주석은 지우셔도 됩니다.) */
    padding: 0.5em;
    background: #3f3f3f;
    color: #dcdcdc;
}

 

이런 것들도 있다~~

이 블로그에서 적용한 코드블럭은 >여기서< 확인할 수 있다.