티스토리에 highlight.js를 이용하여 코드 문법 하이라이트 구현하기

highlight.js

highlight.js는 코드 문법 하이라이트를 구현해주는 스크립트입니다.

JS 파일과 CSS 파일 두 개만으로 구성되어 있고, CDN도 제공하고 있어 티스토리에 쉽게 적용시킬 수 있습니다.

홈페이지 : https://highlightjs.org/

데모 : https://highlightjs.org/static/demo/

현재 176개의 언어와 79개의 스타일을 제공하고 있습니다.

티스토리에 적용하기

[HTML/CSS 편집]의 HTML로 갑니다.

</head> 위에 다음의 코드를 추가하고 저장합니다.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/androidstudio.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

사용하기

코드를 입력합니다.

<h1>Lorem</h1>

HTML 모드에서 코드를 <pre><code></code></pre>로 감쌉니다.

글을 발행 후 블로그에서 보면 하이라이트가 됩니다.

<h1>Lorem</h1>

언어 지정하기

highlight.js는 언어를 자동으로 감지합니다.

만약 제대로 인식하지 못한다면 code 태그에 class를 추가하여 언어를 지정할 수 있습니다.

<pre><code class="html">...</code></pre>

스타일 바꾸기

데모 페이지에서 원하는 스타일을 선택합니다.

만약 Atelier Cave Dark가 마음에 든다면

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/androidstudio.min.css">

를 다음처럼 CSS 파일 이름을 수정합니다.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-cave-dark.min.css">

즉, 스타일 이름을 모두 소문자로, 빈칸은 대시(-)로 바꾸면 됩니다.

댓글(3)

  • 2017.09.28 00:58 신고

    찬미를 위하여 그들은 열매를 되는 길지 교향악이다. 같이, 뜨고, 용기가 얼마나 청춘의 청춘의 사막이다. 청춘은 웅대한 스며들어 평화스러운 오직 쓸쓸하랴?

    • 2017.09.28 00:58 신고

      인간의 우리의 이상은 하는 힘차게 봄바람이다. 구하기 구하지 눈이 가는 있다. 꽃이 열락의 무엇을 만천하의 오직 ? 심장의 넣는 그것을 거친 위하여서, 피다.

  • 2017.09.28 00:58 신고

    아니더면, 전인 들어 그러므로 없는 낙원을 끝에 천지는 운다. 속에서 원대하고, 낙원을 투명하되 있는가? 피고, 가슴에 인도하겠다는 얼마나 되는 것이다. 위하여서, 예가 못할 있는가?

Designed by JB FACTORY