코드 블럭에 라인 넘버(줄 번호) 넣는 방법

들어가며

몇 가지 코드를 추가해줌으로써, 티스토리 블로그의 코드 블럭에 라인 넘버(줄 번호)를 넣을 수 있다.

방법

① HTML 수정해주기 : highlight.js 불러오기

<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();
    hljs.initLineNumbersOnLoad();
</script>

② 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;
}

③ (참고) 코드 블럭 깨짐 현상 발생 시

티스토리 Book Club 스킨 등 몇몇 스킨에서 ②번 과정 이후 스타일 깨짐 현상이 발생할 수 있다.
이럴 때는 다음과 같은 CSS 코드를 추가해준다.
- .entry-content 클래스명은 스킨에 따라 바뀔 수 있다.

.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;
}

스타일 꾸미기

필요한 경우, 다음의 클래스들의 스타일을 변경해준다.
- .hljs-ln-numbers
- .hljs-ln td.hljs-ln-code
- .hljs
- .hljs-ln
크롬 브라우저 등 여러 브라우저의 "개발자 도구" 를 통해 코드 블럭 라인 넘버 관련 클래스명을 확인할 수 있다.

참고 사이트

728x90

그리드형(광고전용)

저작자표시 비영리 변경금지

'Information > Tip' 카테고리의 다른 글

[티스토리 블로그] 특정 문자로 인라인 코드 블럭 설정하기 (인라인 코드 블럭으로 만들기) (7)	2022.12.01
[티스토리 블로그] 표 내부 이미지 정렬시키는 방법 (0)	2022.09.05
[MinGW] 한글 깨짐 현상 문제 해결 방법 (0)	2022.07.06
[MinGW] MinGW(Minimalist GNU for Windows) 설치 및 환경 변수 설정 방법 (0)	2022.06.15
[티스토리 블로그] 첫 화면 특정 페이지로 설정하기 (0)	2022.05.30
[티스토리 블로그] 관리자인지 확인하기 (0)	2022.05.29
[Excel] 실시간 환율 연동 방법 (달러 기준) (0)	2022.05.25
[Excel] 페이지 나누기 선 없애기 (0)	2022.05.17