congcoding

1. highlight.js 적용하기

먼저 검색을 통해 highlight.js를 적용해주세요.

2. highlights-line-numbers.min.js 적용하기

<!-- Line Number 적용 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>

블로그 관리 - 꾸미기 - 스킨 편집 - html 편집 - HTML에 위의 코드를 추가합니다.

3. CSS 적용하기

/* Line Number CSS */
/* for block of numbers */
.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-code {
    padding-left: 10px;
}

블로그 관리 - 꾸미기 - 스킨 편집 - html 편집 - CSS에 위의 코드를 추가합니다.

4. 결과

이 부분은 블로그 스킨, highlight.js의 스타일에 따라 조금씩 다를 것 같습니다.

저는 Square 스킨, github-gist 스타일을 사용하고 있는데,

라인 넘버 width가 통일되지 않고, 코드 왼쪽에 여백이 적용되지 않는 문제가 있어서 커스텀했습니다.

5. 커스텀 하기

/* Line Number CSS */
/* for block of numbers */
.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;
	width: 25px;
}

/* your custom style here */
.hljs-ln td.hljs-ln-code {
	padding-left: 5px;
}

3. CSS 적용하기에서 붙여 넣기 했던 코드를 위의 코드로 바꿔줍니다.

6. 커스텀 결과

커스텀한 결과 라인 넘버 width와 코드 왼쪽 여백이 수정된 것을 볼 수 있습니다.

꼭 저와 동일한 width와 여백을 설정할 필요는 없습니다.

라인 넘버 width를 바꾸고 싶으면 5. 커스텀 하기 코드 15번 라인의 width값을 바꾸면 되고,

코드 왼쪽 여백을 바꾸고 싶으면 5. 커스텀 하기 코드 20번 라인의 padding-left값을 바꾸면 됩니다.

7. 참고 자료