728x90
728x170
코드 블럭에 라인 넘버(줄 번호) 넣는 방법
들어가며
- 몇 가지 코드를 추가해줌으로써, 티스토리 블로그의 코드 블럭에 라인 넘버(줄 번호)를 넣을 수 있다.
방법
① HTML 수정해주기 : highlight.js 불러오기
- <head> 태그가 끝나는 부분인 </head> 태그 앞에 아래의 코드를 넣어준다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.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> hljs.initHighlightingOnLoad(); hljs.initLineNumbersOnLoad(); </script>
② CSS 수정해주기 : 라인 넘버 스타일 적용시켜주기
- 라인 넘버의 스타일을 적용해주는 코드이다.
- 다음과 같이 CSS 코드를 넣어준다.
.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: #B5B5B5; border-right: 1px solid #B5B5B5; vertical-align: top; width: 20px; padding-left: 0px; } .hljs-ln td.hljs-ln-code { padding-left: 15px; }
③ (참고) 코드 블럭 깨짐 현상 발생 시
- 티스토리 Book Club 스킨 등 몇몇 스킨에서 ②번 과정 이후 스타일 깨짐 현상이 발생할 수 있다.
- 이럴 때는 다음과 같은 CSS 코드를 추가해준다.
- .entry-content 클래스명은 스킨에 따라 바뀔 수 있다.
.entry-content > table { width:100%; margin-bottom: 22px; border: 1px solid #e6e6e6; border-collapse: collapse; text-align: center; font-size: 0.9375em; line-height: 1.5714; color: #666; } .entry-content > table thead th { padding:7px 0 11px; border-left: 1px solid #e6e6e6; } .entry-content > table tbody td { padding:7px 0 11px; border-left: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6; }
스타일 꾸미기
- 필요한 경우, 다음의 클래스들의 스타일을 변경해준다.
- .hljs-ln-numbers
- .hljs-ln td.hljs-ln-code
- .hljs
- .hljs-ln
- 크롬 브라우저 등 여러 브라우저의 "개발자 도구" 를 통해 코드 블럭 라인 넘버 관련 클래스명을 확인할 수 있다.
참고 사이트
728x90
그리드형(광고전용)
'Information > Tip' 카테고리의 다른 글
| [티스토리 블로그] 특정 문자로 인라인 코드 블럭 설정하기 (인라인 코드 블럭으로 만들기) (7) | 2022.12.01 |
|---|---|
| [티스토리 블로그] 표 내부 이미지 정렬시키는 방법 (0) | 2022.09.05 |
| [MinGW] 한글 깨짐 현상 문제 해결 방법 (0) | 2022.07.06 |
| [MinGW] MinGW(Minimalist GNU for Windows) 설치 및 환경 변수 설정 방법 (0) | 2022.06.15 |
| [티스토리 블로그] 첫 화면 특정 페이지로 설정하기 (0) | 2022.05.30 |
| [티스토리 블로그] 관리자인지 확인하기 (0) | 2022.05.29 |
| [Excel] 실시간 환율 연동 방법 (달러 기준) (0) | 2022.05.25 |
| [Excel] 페이지 나누기 선 없애기 (0) | 2022.05.17 |
