[코드 구문 강조 - highlight.js]3. highlight.js 줄 번호(line number), 가로 스크롤 추가 방법

highlight.js 3. 가로 스크롤 추가 방법, 줄 번호 추가 방법

---

이전 글은 여기서 확인해주세요.

1. 자신의 웹사이트(블로그)에 코드 구문 강조를 넣어보자(highlight.js 적용 방법)

2. highlight.js적용이 안 될 때(configure 옵션 설정 방법)

---

줄 번호(Line number)를 추가하는 방법

highlight.js에서는 공식적으로 줄 번호 표시 기능을 지원하지 않고 있습니다. 하지만, 일부 사람들이 플러그인으로 highlight.js에 줄번호가 나올 수 있는 라이브러리를 만들어 배포하고 있죠.

 

검색을 해보시면, highlighjs-line-numbers.js와 highlightjs-line-numbers.min.js가 많이 보이는데, 저는 highlightjs-line-numbers.min.js를 사용해보겠습니다.

아닌 경우도 있지만, 일반적으로 min이 붙으면, mini 버전 또는 간소화 버전이겠구나 생각해보실 수 있습니다.

 

https://github.com/wcoder/highlightjs-line-numbers.js/

wcoder/highlightjs-line-numbers.js

직접 받으실 분은 여기 링크를 통해 접속해주시면 됩니다.

Clone or Download를 선택

Download ZIP

하고 압축을 풀어주시면 됩니다.

dist 폴더 안에 highlightjs-line-numbers.min.js 를 업로드할 겁니다.

highlightjs-line-numbers.min.js

0.00MB

업로드해드렸으니, 여기서 그냥 파일만 받으셔도 됩니다.

Tistory 기준으로, 관리자 페이지 HTML 스킨 편집에서 파일 업로드를 선택

highlightjs-line-numbers.min.js 파일 업로드를 하시고 확인하세요.

 

HTML 탭에서 아래와 같이 

<script src="./images/highlightjs-line-numbers.min.js"></script>

hljs.initLineNumbersOnLoad();

2줄을 추가합니다.

  <link rel="stylesheet" href="./images/androidstudio.css">
	<script src="./images/highlight.pack.js"></script>
	<script src="./images/highlightjs-line-numbers.min.js"></script>
	<script>
		hljs.configure({tabReplace:'    '});
		hljs.initHighlightingOnLoad();
		hljs.initLineNumbersOnLoad();
	</script>

모양은 이렇게 되겠죠?

CSS 탭에서 아래와 같이 아무 곳에나 코드를 입력합니다.

.hljs-ln td.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: 2px solid #ccc;
	vertical-align: top;
	padding-right: 5px;
}

CSS 탭에 아래와 같은 코드를 추가 하셨으면 됩니다.

작업이 끝났습니다. 잘 나오겠지?

아니 이게 뭐야, 분명 Tistory에서 제공한 반응형 스킨을 베이스로 한 것 같은데, 이것저것 제대로 안 되는 게 많네요. 확인을 해봐야겠습니다.

 

확인을 해봤더니, 아래와 같이 본문 table 태그가 눈에 보이는군요. highlightjs-line-numbers.js에서 table 태그를 활용해 라인을 표시하는가 봅니다. 

본문에 표를 안쓰시면, .article_view table 관련 스타일들을 삭제해주시면 됩니다. 기본표는 검은색 실선으로 나오는데, 예제에 나온 코드는 테두리를 포함하여 회색으로 자연스러운 표를 나오게 하려는 것 같습니다.

 

신경이 쓰이신다면, 아래와 같이 본문에 바로 표가 나왔을 때만 적용해주시는 것도 방법인 것 같습니다.

참, 제가 여러가지 예외상황에 실습하기 좋은 블로그 스킨을 쓰고 있었네요

수정 후 확인해보시면, 이제 어느 정도 된 것 같습니다. 줄 표시가 조금 어색하기는 한데, 잘 나오는군요. 줄 표시를 없애고 싶으시면, 굳이 다 초기화하지 않으셔도 되고, HTML 탭에 hljs.initLineNumbersOnLoad(); 부분만 삭제하시거나 주석 처리 해주시면 될 것 같습니다.

모바일 환경을 위한 가로 스크롤 추가

highlight.js를 기본적으로 쓰고 계시다면, 모바일 환경이나 가로로 긴 줄을 표시할 때, 아래와 같이 지저분하게 표시됩니다.

그래도 이 코드는 깨끗하게 나오는 편이네요.

CSS 탭에서 아래와 같은 코드를 입력하시면 바로 해결됩니다.

.hljs
{
	white-space: pre;
	overflow-x: auto;
}

실제 적용 화면

코드 화면을 보면 가로 스크롤이 생겨, 모바일 환경에서도 옆으로 스윽 밀면 코드를 쉽게 확인하실 수 있습니다.