[티스토리 블로그] 코드블럭 라인넘버 추가하기

코드블럭 라인넘버 추가하기

1. HTML 편집

티스토리 관리 페이지 → 스킨편집 → HTML 편집 → HTML 탭

<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.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> 바로 위에 코드 추가해 줍니다.

2. CSS 편집

티스토리 관리 페이지 → 스킨편집 → HTML 편집 → CSS 탭

table:not(.hljs-ln) 추가하기

.hljs-ln-numbers {
	user-select: none;
	text-align: right;
	vertical-align: top;
	color: #ccc;
	border-right: 1px solid #CCC;
	padding-right: 10px !important;
	word-break: keep-all !important;
}
.hljs-ln-code {
	padding-left: 10px !important;
}