Highlight js를 활용한 코드 하이라이팅

웹사이트 글 작성 시 코드 영역을 소스코드 편집기에서 보는 것처럼 강조하기 위한 방법으로 사용한다.
하이라이터 사용 방법은 CDN 혹은 js 파일을 다운받아서 사용할 수 있다.
이 포스팅에서는 js 파일을 다운받아서 티스토리 블로그에 적용한다.

Highlight js 적용

① https://highlightjs.org/download/
② https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js

1번 공식 홈페이지에서 hljs를 다운로드 받고 파일의 압축을 해제한 뒤 highlight.pack.js 파일과
styles 폴더 내에 원하는 코드 스타일 css 파일 을 선택한다.
2번 사이트에서 hljs의 줄 번호 표시를 위한 js 파일을 다운받는다.

티스토리 스킨 편집에서 아래와 같이 등록한다.

tistory 파일 업로드
highlight.pack.js, highlightjs-line-numbers.min.js, {선택한 CSS 파일}.css

tistory html

 <!-- </head> 태그 위에 등록 -->
 <link rel="stylesheet" href="./images/{선택한 CSS 파일}.css">
 <script src="./images/highlight.pack.js"></script>
 <script src="./images/highlightjs-line-numbers.min.js"></script>
 <script>hljs.initHighlightingOnLoad();</script>
 <script>hljs.initLineNumbersOnLoad();</script>
 <script>
   $(document).ready(function() {
     $("code.hljs").each(function(i, block) {
       hljs.lineNumbersBlock(block);
     });
   });
 </script>

tistory css

 .hljs-ln-numbers {
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
  
     text-align: right;
     color: #ccc;
  
     vertical-align: top;
     width: 25px;
 }
 /* 본인 스타일에 맞게 수정 */
 code { font-family: Consolas, monospace; font-weight:bold; background-color: #F0F0F0; font-size: 14px}

하이라이팅하려는 코드에 아래처럼 pre와 code 태그를 추가하여 사용할 수 있다.

 <pre><code class="hljs">코드를
 이곳에 작성한다.
 </code></pre>

티스토리 새 에디터에서는 코드 블럭을 이용하면 자동으로 추가된다.