티스토리에 highlight.js를 활용하여 코드 하이라이트 추가하는 방법

highlight.js

Highlight.js는 자바스크립트로 쓰인 코드 구문 강조를 위한 라이브러리이다.  어떠한 프레임워크에도 의존하지 않고, 거의 모든 마크업에서 작동하며 언어 감지 기능을 가지고 있다.

 

• 다양한 언어와 여러가지 스타일을 제공합니다.
• 자동으로 사용된 코드 구문을 찾아 알맞은 스타일로 표현할 수 있습니다.
• 여러가지 혼합된 코드에 대한 구문 강조가 가능합니다.
• node.js에서 사용 가능합니다. 
• 어떠한 마크업과도 작동합니다.
• 어떠한 자바스크립트 프레임워크와도 호환됩니다.
• 모던 브라우저들, IE9 이상을 지원합니다.

자세한 사용 설명법은 highlight.js 문서에서 확인할 수 있습니다.

 

CDN 이용하기

highlight.js CDN은 cdnjs와 jsdelivr을 지원하고 있습니다.

cdnjs

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>

jsdelivr

<link rel="stylesheet"
      href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>

 

CDN을 활용해서 티스토리 스킨 head 태그 안쪽에 스크립트를 삽입합니다. (스킨편집 / HTML 편집)

저는 여기서 cdnjs를 사용하겠습니다. 

 

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

 

스크립트 삽입

 

highlight.js 스타일 종류

저는 highlight.js에서 제공해주는 스타일 중에 Atom One Dark Reasonable 타입이 가장 마음에 들기 때문에 이걸로 적용하도록 하겠습니다.

 

스타일을 다운로드 하기 위해 여기서 사용하시는 언어를 체크해주고, 원하시는 언어가 들어있는 스타일팩만 다운로드 받습니다.

다운로드를 완료했다면 아래와 같은 파일들이 들어있는 폴더에서 styles로 들어갑니다.

 

원하시는 색상 파일을 선택합니다.

 

티스토리 스킨편집/HTML 편집/파일 업로드에서 선택하신 css파일을 업로드합니다.

<link rel="stylesheet" href="./images/atom-one-dark-reasonable.css">

 

 

highlight.js 적용 전

highlight.js 적용 후

 

위 이미지는 highlight.js 추가하기 전과 후를 비교하는 이미지입니다. highlight.js를 활용하니 훨씬 깔끔하고 보기 좋아졌습니다.

 

티스토리와 관련된 또 다른 팁이 궁금하다면?

 

티스토리 검색엔진 최적화(SEO) 시키는 방법

티스토리 검색엔진 최적화(SEO) 시키는 방법

 

[웹폰트] 티스토리 블로그 나눔바른고딕 폰트 적용

[웹폰트] 티스토리 블로그 나눔바른고딕 폰트 적용

티스토리 애드센스 자동광고가 나오지 않을 때 해결방법

티스토리 애드센스 자동광고가 나오지 않을 때 해결방법