[코드 블럭] 티스토리 코드 블록 라인넘버 적용

안녕하세요 김작심입니다~!

 

오늘은 티스토리의 보기 불편했던 코드블럭에 코드 라인 넘버를

 

넣어 줌으로써 가독성을 높여 보도록 하겠습니다~!

 

---

코드 라인을 넣는 방법을 알아보기 전에

 

지난 포스팅에서 코드 블럭에 하이라이트를 넣어주는 방법을 알아봤는데요.

 

2021.09.29 - [개발 이야기/기타] - [코드 블럭] 티스토리 코드 블록 하이라이트 적용

[코드 블럭] 티스토리 코드 블록 하이라이트 적용

 

그때 사용하였던  highlight.js를 이용하여,

 

하이라이트에 이은 코드 라인 넘버도 적용해 줄 예정입니다.

 

---

우선 지난번에 설정했던 것과 같은 방법으로 

 

티스토리 관리 -> 꾸미기 -> 스킨 편집으로 들어가 오른쪽 상단에 html 편집을 눌러줍니다.

HTML 코드들이 보일 텐데 상단에 보시면 </head>라고 적혀있는 부분이 보일 텐데요.

 

지난번과 같이 해당 코드 바로 위에 아래와 같이 코드를 입력해 넣습니다.

 

	<!-- 코드 라인 적용 -->
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
	<script>hljs.initLineNumbersOnLoad();</script>

 

html 부분에 해당 코드를 입력하였다면, 상단에 CSS탭을 눌러 이동해줍니다. 

 

그리고 가장 맨 밑에 아래 코드를 추가해줍니다.

 

/* 라인 넘버 CSS */
.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;
}

 

그리고 여기까지만 하고 적용을 누르고 코드 블럭을 확인하면,

 

아래 사진과 같이 코드 라인이 무언가 표같이 나오는 것을 확인할 수 있는데요.

 

 

이럴 경우에는 아까 CSS를 입력해줬던 편집기로 돌아가서 table이라는 단어를 찾아

 

table 앞에 > table 이런 식으로 부등호를 넣어주면 됩니다.

 

스킨마다 css값이 다를 수 있는데요,

 

위 사진의 3717 라인과 같이. xxxxx로 시작한 다음에 table이 들어가 있는 단어 앞에 '>'를 적어 넣어 준다고 생각하면 됩니다.

 

수정을 완료했으면 적용을 누르고 다시 확인해보면

 

 

이와 같이 적상적으로 코드 라인 넘버가 적용된 모습을 확인할 수 있습니다~!

 

이상으로 코드 블럭에 코드 라인 넘버를 적용하는 방법을 알아보았습니다.