티스토리 코드블럭에 highlight.js가 적용된 경우, 코드 앞부분에 라인넘버를 표시하는 방법 정리.
플러그인 확보, HTML에 적용
highlightjs-line-numbers라는 플러그인이 필요한데, 아래 github에서 다운로드하거나 cdn 경로를 얻어 적용할 수 있다.
https://github.com/wcoder/highlightjs-line-numbers.js/
티스토리 환경설정 - 스킨편집 - html편집 부분 상단 <head> 태그 안에 추가한다(highlight.min.js는 기존에 있던 것).
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.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>
$(document).ready(function() {
hljs.highlightAll();
hljs.initLineNumbersOnLoad(); // 추가
});
</script>
이제 코드블럭을 확인해 보면 매우 간단하게 라인넘버가 추가된 것을 확인할 수 있다.
그런데 코드와의 간격이나 색상 차이 등이 명확하지 않아 가독성이 떨어진다.
디자인(CSS) 수정
간격을 띄우고 색상(투명도)을 변경하고 구분선을 넣도록 하자.
다시 티스토리 환경설정 - 이번에는 CSS 부분 맨 밑에 아래 코드를 추가한다.
.hljs-ln-n {
border-right: 1px solid rgba(255, 255, 255, 0.4);
margin-right: 15px;
padding-right: 15px;
opacity: 0.4;
text-align: right;
}
어떻게 변했는지 확인해 보자.
꽤 그럴싸하게 정리되었다.
끝.
'코딩 > HTML & CSS' 카테고리의 다른 글
| CSS - opaciy, rgba, filter (투명도 조절 _ IE8) (0) | 2023.07.11 |
|---|---|
| css - 반응형 페이지에 이미지를 정사각형으로 표시 (0) | 2023.06.20 |
| HTML 파일에서 SVG 파일 내의 엘리먼트 다루기 (0) | 2022.07.19 |
| pageable 풀페이지 구획별로 다르게 적용하기 (0) | 2022.07.15 |
| css만으로 SVG 이미지 애니메이션 효과 적용하기 (0) | 2022.07.01 |
