[Tistory] 티스토리 코드블럭에 라인넘버(line number) 표시하기 [highlightjs-line-numbers]

[Tistory] highlight.js 사용하여 코드블럭 테마 적용하기 [티스토리 코드블럭 테마 적용]

---

- 티스토리 코드블럭에 라인넘버(line number) 표시하기

지난 포스팅에 이어, 이번에는 코드블럭에 라인넘버를 표시하려고 한다.
아래 링크를 통해, highlightjs-line-numbers.js를 다운로드 한다.

GitHub - wcoder/highlightjs-line-numbers.js: Line numbering plugin for Highlight.js

---

highlightjs-line-numbers.js 다운로드

js 파일 업로드 / 해당 파일은 dist 폴더 안에 있다.

 

스킨편집 HTML에 아래의 코드를 추가해준다.

<!-- 코드 블럭 line number 추가 -->
<script src="./images/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>

 

코드 블럭 line number 관련 스크립트 추가

---

코드블럭에 라인넘버가 표시되었다.

---

- css로 코드블럭 디자인 수정하기

코드블럭에 라인넘버가 표시되긴 하였으나, 모양이 예쁘지 않아 css를 추가하였다.
→ 글자 우측 정렬 및 라인넘버와 코드 사이에 선을 그어주었다.

.hljs-ln-n {
    border-right: 1px solid rgba(58, 58, 58, 0.4);
    margin-right: 15px;
    padding-right: 15px;
    opacity: 0.4;
    text-align: right;
}

---

더욱 완벽해진 코드블럭

---

- 참고자료

[티스토리]코드 블럭 line number 추가

티스토리 코드블럭에 라인넘버 적용(highlightjs-line-numbers)

---