본문 바로가기
개발도구

티스토리 ] 코드블럭 라인 번호 매기기

by eteo 2022. 12. 11.

 

 

꾸미기 - 스킨편집 - html 편집 - HTML 탭

 

<head> 와 </head> 사이에 아래 코드 카피

 

<!-- 하이라이트 적용 --> 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>	
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>

<script>hljs.initHighlightingOnLoad();</script>
<script>hljs.initLineNumbersOnLoad();</script>

 

 

 

 

CCS 탭으로 이동

 

맨 마지막 줄에 아래 코드 카피

 

/* 하이라이트 라인넘버 */
.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: #B5B5B5;
	border-right: 1px solid #B5B5B5;
	vertical-align: top;
	width: 20px;
	padding-left: 0px;
}
 
.hljs-ln td.hljs-ln-code {
	padding-left: 15px;
}

 

 

 

 

 

 

CCS 탭에서 Ctrl+F 를 눌러 'entry-content table' 검색

 

.entry-content table {
	//...
}
.entry-content table thead th {
	//...
}
.entry-content table tbody td {
	//...
}

 

위 코드를 아래 코드로 교체

 

.entry-content > table {
	width:100%;
	margin-bottom: 22px;
	border: 1px solid #e6e6e6;
	border-collapse: collapse;
	text-align: center;
	font-size: 0.9375em;
	line-height: 1.5714;
	color: #666;
}
.entry-content > table thead th {
	padding:7px 0 11px;
	border-left: 1px solid #e6e6e6;
}
.entry-content > table tbody td {
	padding:7px 0 11px;
	border-left: 1px solid #e6e6e6;
	border-top: 1px solid #e6e6e6;
}

 

 

 

 

출처 : https://scribblinganything.tistory.com/343