[티스토리] hELLO 스킨에 코드 블럭 복사 버튼 추가하기
현재 블로그 스킨으로 `hELLO` 스킨을 사용하고 있다. 개인적으로 티스토리 스킨 중 완성도가 가장 높다고 생각한다. 이 스킨은 다크 모드를 완벽히 지원하며 디자인이 너무 미니멀해서 보는 순간
deploylife.tistory.com
지난번 "[티스토리] hELLO 스킨에 코드 블럭 복사 버튼 추가하기" 글에 이어, 이번에는 hELLO 스킨의 코드 블럭에 라인 번호를 추가하는 방법을 소개한다. 코드에 라인 번호가 있으면 특정 줄을 지칭하거나 코드의 흐름을 파악하는 데 훨씬 용이하여 가독성을 크게 높일 수 있다.
hELLO 스킨은 `highlight.js`를 사용하여 코드 블럭을 렌더링하는데, 여기에 `highlightjs-line-numbers.js` 플러그인을 활용하여 간단하게 라인 번호 기능을 추가할 수 있다.
시작하기 전에: 플러그인 설정 및 코드 삽입 위치
가장 중요한 주의사항이 하나 있다. 티스토리 블로그 설정의 플러그인 메뉴에서 `Syntax Highlight` 플러그인이 활성화되어 있다면 반드시 비활성화해야 한다. `highlight.js`와 충돌하여 제대로 적용되지 않기 때문이다.
제시된 `<script defer>` 태그는 `defer` 속성을 사용하여 HTML 파싱이 완료된 후에 스크립트가 실행되도록 한다. 이로 인해 스크립트 삽입 위치가 `<body>`태그 이전에 있든 이후에 있든 기능상 큰 문제는 발생하지 않는다. 하지만 커스텀 코드의 효과적인 관리를 위해 개인적으로는 `</body>` 태그 바로 이전에 코드를 배치하는 것을 선호한다. 이렇게 하면 필요한 코드를 한곳에 모아두어 나중에 찾거나 수정하기가 더 용이하다.
코드 추가하기: HTML (스킨 편집)
티스토리 블로그 관리 페이지에서 `스킨 편집` 메뉴로 이동한다. `HTML` 탭을 선택한 후 `<body>`태그 바로 위에 아래 JavaScript 코드를 추가한다. 첫 번째 `<script>`태그는 highlightjs-line-numbers.js 라이브러리를 로드하며, 두 번째 `<script>` 태그는 페이지 로드가 완료된 후 `highlight.js`에 라인 번호 기능을 초기화하도록 한다.
- 티스토리 블로그 관리 페이지로 이동한다.
- 좌측 메뉴에서 `스킨 편집`을 선택한다.
- `HTML` 탭을 클릭한다.
- `</body>`태그 바로 위에 아래 코드를 추가한다.
현재 티스토리 글쓰기 편집 모드에서는 `기본모드`, `마크다운`, `HTML` 이렇게 3가지 모드를 지원한다. 기본모드에서 코드블럭에 특정 언어를 설정한후 마크다운으로 변경하면 해당 언어항목이 삭제되는 문제가 있다. 글쓰기 모드 변경은 서로간에 서식이 호환되지 않기때문에 주의하자.
<script defer src='//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js'></script>
<script>
window.addEventListener('load', () => {
hljs.initLineNumbersOnLoad()
})
</script>
스타일 추가하기: CSS (스킨 편집)
다음으로, `CSS` 탭을 선택하여 아래 CSS 코드를 추가한다. 이 코드는 라인 번호의 색상, 크기, 정렬 등 디자인을 담당하여 코드 블럭과 자연스럽게 어우러지도록 한다. `hljs-ln-code` 클래스에 `padding-left`를 `!important`로 지정하여 라인 번호와 코드 내용 사이에 적절한 간격을 확보한다.
- `스킨 편집` 페이지에서 `CSS` 탭을 클릭한다.
- 기존 CSS 코드의 원하는 위치에 아래 코드를 추가한다.
.hljs-ln-numbers {
color: rgb(100, 100, 100);
font-size: 0.8em;
text-align: right;
}
.hljs-ln-code {
padding-left: 10px !important;
}
마무리
이제 hELLO 스킨의 코드 블럭에 라인 번호가 성공적으로 추가되었다. 이 기능은 복잡한 코드나 긴 코드 블럭의 가독성을 크게 향상시켜 방문자들이 코드를 더욱 효과적으로 분석하고 이해하는 데 도움을 줄 것이다.
'Blog' 카테고리의 다른 글
| [티스토리] hELLO 스킨의 인라인 코드 블럭을 노션 스타일로 변경하기 (3) | 2025.07.23 |
|---|---|
| [티스토리] hELLO 스킨에 코드 블럭 복사 버튼 추가하기 (2) | 2025.07.09 |