일상/블로그

[TISTORY/Code Block] 티스토리 코드블럭 라인넘버(line number) 설정

박주단 2021. 1. 24. 01:33
#관련 글
[TISTORY/Code Block] 티스토리 코드블럭 하이라이트(highlight.js) 테마 설정
[TISTORY/Code Block] 티스토리 코드블럭 라인넘버(line number) 설정
[TISTORY/Code Block] 티스토리 코드블럭 스크롤(Scroll) 설정

 

#라인넘버(Line Number)

코드 블럭에 하이라이트를 설정하면 데모 사이트에서 본 디자인과 다를 수 있습니다.

티스토리의 css코드에 기본적으로 설정 된 코드들이 있어서 그렇습니다. 

마음에 드는 디자인과 가독성을 높이기 위해 몇 가지 수정을 할 건데, 첫 번째로 라인넘버를 설정하겠습니다.

 

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

 

wcoder/highlightjs-line-numbers.js

Line numbering plugin for Highlight.js . Contribute to wcoder/highlightjs-line-numbers.js development by creating an account on GitHub.

github.com

라인넘버는 github 페이지에서 js파일을 다운로드 하거나 cdn코드로 라이브러리를 가져와서 설정할 수 있습니다.

# 방법 1 - js 다운로드

아래의 경로를 통해 '다른 이름으로 링크 저장' 으로 다운로드 합니다.

 

 

블로그 관리 페이지 → [스킨 편집] → [파일업로드] 탭으로 이동해서 다운받은 js파일을 추가합니다.

 

 

[HTML] 탭으로 이동해서 <head></head> 태그 사이에 플러그인 초기화 코드를 삽입합니다.

 

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

# 방법 2 - 라이브러리

블로그 관리 페이지 → [스킨 편집] → [HTML] 탭으로 이동합니다.

<head></head>태그 사이에 github 페이지에서 복사한 cdn코드와 플러그인 초기화 코드를 추가합니다.

 

<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>

 

highlight와 Line Number 추가한 이미지

 

여기까지 하시면 코드 블럭에 라인 넘버가 추가됩니다. 그런데 UI를 확인하면 아래와 같이 나타나는 경우가 있습니다.

이유는 티스토리의 기존 css코드에서 table에 기본으로 설정된 코드가 있기 때문입니다.

 

 

# table 설정 변경

블로그 관리 페이지 → [스킨 편집] → [CSS] 탭으로 이동합니다.

.entry-content와 table 사이에 > 를 넣어서 .entry-content 요소의 자식 테이블인 경우에만 아래 속성이 적용되도록 합니다.

 

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

 

이 외에도 [CSS] 탭에서 여백, 글자색 등 원하는 설정을 커스텀 할 수 있습니다.

 

코드블럭에 라인넘버 추가 완료