|
티스토리 하일라이트(highligth) 코드 블럭 디자인 라인번호, 줄번호 추가하는 방법 |
|
환경: Chrome |
블로그에 추가한 코드를 보기 편하게 디자인해 주는 하일라이트를 설치해서 적용했지만 줄 번호가 없어서 아쉬웠습니다. 기존 하일라이트를 제공해 주는 사이트에서는 줄 번호 관련 옵션이 없습니다. 자신이 직접 구현을 하거나 구현된 소스를 가져가 쓰는 수 밖에 없습니다. 다행히 쉽게 라인번호를 추가할 수 있도록 Github 에 소스를 공유하신 분이 있더군요.
▼ 라인번호 없이 순수하게 하일라이트만 적용한 결과입니다. 여기에 라인번호를 추가할 것입니다.
▼ 라인 번호 추가가 가능한 jjavascript 를 개발해서 배포하신 분이 있습니다. Github 주소는 다음과 같습니다. 아래에 보시면 설명이 나와 있지만 제가 요약해서 테스트 한 결과를 공유하겠습니다.
https://github.com/wcoder/highlightjs-line-numbers.js/
▼ 먼저 아래 소스를 <head> 태그 안에 삽입합니다. 라인 번호를 추가할 js 파일과 script 소스가 들어갑니다. js 파일은 CDN 서버 링크를 통해서 가져옵니다. 직접 다운받아 추가하는 것보다 편할 겁니다.
<!-- Highlight Line Number JavaScirpt - Cloudflare CDN 사용 --> <script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script> <script> hljs.initLineNumbersOnLoad(); $(document).ready(function() { $('code.hljs').each(function(i, block) { hljs.lineNumbersBlock(block); }); }); </script>
▼ 위의 소스는 <head></head> 태그 안에 삽입합니다.
▼ 다음은 CSS 를 복사해서 붙여 넣어야 합니다. CSS 의 내용은 다음과 같습니다.
<style> /* for block of numbers */ .hljs-ln td.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; /* your custom style here */ } /* for block of code */ .hljs-ln td.hljs-ln-code { padding-left: 10px; } </style>
▼ 위의 소스는 <head></head> 태그 안에 삽입합니다.
▼ 결과는 다음과 같습니다. 왼쪽에 라인번호가 표시되는 것을 확인할 수 있습니다.
'블로그' 카테고리의 다른 글
| 티스토리 유입 검색어 구글 서치 콘솔(Search Console)로 확인하는 방법 (0) | 2021.01.25 |
|---|---|
| 티스토리 사이트맵 자동 생성해서 네이버 웹마스터도구, 구글 Search Console 등록하기 (0) | 2020.07.19 |
| 티스토리 블로그 GIF 이미지 정지 화면으로 보이는 경우 조치 방법 (0) | 2020.06.10 |
| 티스토리 블로그 대표 이미지 설정하는 방법 (0) | 2020.06.04 |
| 티스토리 소스 코드 가독성을 위해 하일라이트(highlight.js) 적용하는 방법 (0) | 2020.05.24 |
| 티스토리 플러그인 이용해서 소스 코드 하일라이트 (Code Highlight) 적용하는 방법 (0) | 2020.05.21 |
| 티스토리 구독 피드 정보 관리하는 방법 (0) | 2020.05.08 |
| 티스토리 블로그 애드센스 광고 추가하기 (2) | 2020.02.17 |
녹두장군1님의
글이 좋았다면 응원을 보내주세요!
