[블로그] 티스토리 Square 스킨 코드 하이라이팅 + 줄 번호 설정하기

친구가 내 블로그를 다크 모드로 보는데 CSS가 엄청 이상하게 적용되어 있었다. 여러가지 플러그인과 CSS를 추가했던게 다크 모드랑 중복되어 이상해진 것 같고, 스킨이 요즘 마음에 안들기도 했던 참이라 Square 스킨으로 교체했다.

지금까지 설정했던 것들이 사라진건 아쉽지만 그렇게 어려운 것도 아니니까, 차근차근 생각날 때 기능을 하나씩 추가할 예정이다. 지금은 내 블로그 컨텐츠에서 가장 중요한 코드 하이라이팅 설정을 추가했다.

코드 하이라이팅 추가하기

티스토리의 플러그인 설정 목록에 보면, 코드 하이라이팅 추가 기능이 있긴 하다. 그런데 하이라이팅 언어중에 Java가 없다! 그래서 직접 추가하기로 했다.

highlight.js 라이브러리를 사용한다. https://highlightjs.org/ 공식 홈페이지에서 필요한 언어를 선택해서 다운로드 받을 수 있다. 나는 나중에 관심있는 언어도 포함해서 20개 정도 선택한 것 같다 ㅋㅋㅋㅋㅋ

아무튼 다운받은 압축 파일을 열어보면 highlight.min.js가 있다. 이거랑 styles 폴더 안에 있는 css 중에 원하는 것을 골라서 티스토리-스킨 편집-파일 업로드 기능을 이용해서 추가하자.

추가했다면 이제 HTML에서 불러오고, highlight.js의 함수를 호출하면 끝이다. 개발자로써 어떻게 만들었을지 조금 궁금해서 생각해봤는데, 아마도 highlightAll 메소드가 DOM을 파싱하고, code 요소에 맞는 클래스를 부여하는 방식이 아닐까 싶다.

<!-- 코드 하이라이팅 라이브러리 추가 -->
<script src="./images/highlight.min.js"></script>
<link rel="stylesheet" href="./images/github.min.css"/>
<script>
    hljs.highlightAll();
</script>

1. highlight.js 다운로드 받기
2. highlight.min.js랑 원하는 스타일 css 파일 업로드 하기
3. HTML에서 라이브러리 추가하고 함수 호출하기

줄 번호 추가하기

highlightjs-line-numbers.js 라이브러리를 사용한다. https://github.com/wcoder/highlightjs-line-numbers.js 에서 사용 방법을 알 수 있다. 이건 cdn으로 추가하고, 함수 한 줄만 추가하면 된다. 최종적으로 적용한 결과는 아래와 같으니, 파일 업로드를 정상적으로 했다면 그냥 아래의 코드를 복사해서 HTML의 head 요소 안에 붙여넣어도 된다.

아, 스킨을 또 날려먹지 않기 위해서 주석을 꼼꼼히 달아놓았다.

<!-- 내가 추가한 설정 -->

<!-- 코드 하이라이팅 라이브러리 추가 -->
<script src="./images/highlight.min.js"></script>
<link rel="stylesheet" href="./images/github.min.css"/>
<!-- 코드 하이라이팅 줄 번호 라이브러리 추가 -->
<script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
<script>
    hljs.highlightAll();
    hljs.initLineNumbersOnLoad();
</script>

<!-- 내가 추가한 설정 끝 -->

줄 번호 스타일 추가하기

줄 번호 라이브러리의 Readme를 보셨다면 아시겠지만, 라이브러리 개발자분이 만들어둔 줄 번호 스타일이 있다. 설정해보니 마음에 들어서 줄 번호와 구분자 사이의 간격만 조금 넓혀서 사용하고 있다.

/* 내가 추가한 설정 */
/* 하이라이팅 줄 번호 스타일 */
.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: 1px solid #CCC;
    vertical-align: top;
    padding-right: 5px;
}
/* 줄 번호와 구분자 사이 간격 설정 */
.hljs-ln-n {
    padding-right: 5px; 
}

/* for block of code */
.hljs-ln-code {
    padding-left: 10px;
}
/* 내가 추가한 설정 끝 */

줄 번호 너비가 코드블럭마다 다른 문제

작성된 글을 확인하니 코드블럭마다 줄 번호의 너비가 다른 것을 확인했다. 줄 번호 생성 라이브러리를 확인했을 때, 따로 줄 번호의 너비를 지정하는 코드는 없었다. CSS의 문제인데, 추가된 CSS 중에서는 이유를 찾지 못했다. 내가 놓쳤거나 티스토리의 CSS 둘 중 하나라고 생각한다. 원인은 찾지 못했지만 보기 싫은건 고쳐야하니 줄 번호의 너비를 적당히 20px로 고정시켜서 해결했다.

.hljs-ln .hljs-ln-numbers {
    width: 20px;
}