1.소개
highlight.js 는 코드 구문강조 를 위한 플러그인 이며 자바스크립트로 작성된 코드작성용 라이브러리 입니다. 많은언어와 다양한 스타일을 제공하며 자동으로 언어를 감지해주고 130개의 언어와 79개의스타일을 제공하며 자동으로 사용된 코드 구문을 찾아 알맞은 스타일로 표현해줍니다.
- 176 languages and 79 styles
- automatic language detection
- multi-language code highlighting
- available for node.js
- works with any markup
- compatible with any js framework
2.사용법
사용방법은 두가지가있습니다. 홈페이지를 통해 무료로 다운받아 업로드하는방식, 또는 CDN(Contents Delivery Network)을 사용하는 방법이 있습니다.
소개에 언급한것과 같이 130개의 언어를 감지하여 제공해주지만 CDN을 사용하면 23개의 언어만 사용할수있고 이외의 언어지원이 필요하다면 다운받아 사용하면됩니다. https://highlightjs.org 에서 지원 가능한 언어와, 스타일을 확인하실수있습니다.
1) 다운로드 받아 사용하기
https://highlightjs.or 해당 홈페이지로 접속하여 다운로드버튼을 눌러 원하는 언어를 선택해준다음 다운로드합니다.
다운로드 하시고 압축을 풀어주셨으면 티스토리에 highlight.pack.js 와 원하는 스타일의 CSS 파일을 업로드한 다음 html <head></head> 안에 다음 코드를 추가해줍니다. default.mi.css 에 원하는 CSS 파일명을 넣어주시면됩니다. 원하는 스타일을 미리보기 하시려면 https://highlightjs.org/static/demo/ 에 접속하여 확인할수있습니다.
<rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/styles/default.min.css"/>
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
2) CDN (Contents Delivery Network) 이용하기
html <head></head> 에 다음과 같은 코드를 넣어줍니다. 스타일을 적용하려면 default.min.css 에서 스타일명을 변경해주시면됩니다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
3) 코드 넣는 방법
글작성시 우측상단에 보이는 HTML 을 체크하고 하단 코드를 넣은뒤 사용하면 자동으로 감지하여줍니다.
<pre><code>
....
</code></pre>언어사용시 에는 code 에 class 를 부여해주면됩니다. 대부분 자동으로 언어를 감지해주지면 아래와같이 직접 언어를 지정해줄수도있습니다.
<pre><code class="css"></code></pre>4) 주의할점/팁
글작성시 HTML 을 체크하여 작성하면
<pre><code><div></div></code></pre>
<div></div>가 태그로 인식되어 출력되지않습니다. 이를 해결하기위해선 < 와 > 를 < > 이렇게 입력해주어야하는데 일일히 작성하여주기엔 너무 번거롭고
HTML 모드에서 기본코드만 작성해준다음 다시 편집기모드로 돌아와 나머지코드를 작성해주면됩니다.