Ryu.log

[ JavaScript ] highlight.js를 이용한 코드 하이라이팅 본문

Front-end/Vanilla JS

[ JavaScript ] highlight.js를 이용한 코드 하이라이팅

류뚝딱 2019. 7. 25. 14:50

highlight.js를 이용한 코드 하이라이팅

회사 업무도중 highlight.js 플러그인을 사용해야하는 상황이 생겼다.
highlight.js는 코드의 하이라이트를 구현해주는 플러그인이다.

많은 언어와 다양한 스타일을 제공하고, 자동으로 언어를 감지하는 기능도 갖추고 있다.
현재 162개의 언어를 지원하며 CDN으로 이용시 22개의 언어를 지원한다.

검색 결과 CDN으로 사용하는 방법만 웹상에 가득해서, npm을 통한 모듈로서 highlight.js를 사용하는 방법을 기록해 놓는다.

CDN 방식

먼저 CDN을 통한 highlight.js 사용방법은 아래 코드를 페이지 <head> 테그 사이에 위치시킨다.

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

기본적인 사용 방법은 페이지에 아래 코드를 입력하고 class부분에 언어를 넣어준다.

<pre><code class="css">body {
   background:red; 
}</code></pre>

<pre><code class="html">&lt;p&gt;test&lt;/p&gt;</code></pre>

<pre><code class="javascript">const aa = x => x * 3;</code></pre>

유의할점은 html에서 <>단락을 인식 못하는 현상으로 인해 &lt; &gt; 형식으로 작성해주어야 한다.

한가지 더 유의할점은 <code> 바로 다음부터 첫줄이 실행 된다는 것이다.

<pre><code class="css"> 
  body { background:red; } 
</code></pre>

위와 같은 코드로 작성하게 되면 첫줄이 띄어진 상태로 출력이 된다.

코드 하이라이팅 스타일을 변경하고싶다면, 아래 코드와 같이 default.min.css를 변경해준다.

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

https://github.com/highlightjs/highlight.js/tree/master/src/styles

이곳에서 각 스타일들을 확인가능하며 CDN일 경우 min을 붙혀주어야 한다. ex) name.min.css

NPM Module방식

공식문서의 가이드가 많이부실해서 헤딩을 좀 했다..
먼저 프로젝트 루트에서 아래 명령을 입력해준다.

npm install highlight.js --save

webpack을 통하여 사용한다면 entry포인트

ex) index.js 파일에 highlight.js를 import 시키고, 아래 필요한 언어팩을 등록시킨다.

// index.js 
import hljs from 'highlight.js/lib/highlight'; 
import javascript from 'highlight.js/lib/languages/javascript'; 
import css from 'highlight.js/lib/languages/css'; 
import html from 'highlight.js/lib/languages/xml'; 

hljs.registerLanguage('javascript', javascript); 
hljs.registerLanguage('css', css); 
hljs.registerLanguage('html', html);

여기까지 완료 되엇다면 그 아래 addEventListener를 이용하여 pre 태그 code 태그 에대한 highlight를 실행시킨다.

// index.js 
import hljs from 'highlight.js/lib/highlight'; 
import javascript from 'highlight.js/lib/languages/javascript'; 
import css from 'highlight.js/lib/languages/css'; 
import html from 'highlight.js/lib/languages/xml'; 
hljs.registerLanguage('javascript', javascript); 
hljs.registerLanguage('css', css); 
hljs.registerLanguage('html', html); 

document.addEventListener('DOMContentLoaded', () => { 
  document.querySelectorAll('pre code').forEach((block) => { 
    hljs.highlightBlock(block); 
  });
});

그런다음 메인 entry css 파일에 스타일 테마를 import 시키고,
CDN 방식과 동일하게 코드를 입력하면 highlight가 적용된다.

@import '~highlight.js/styles/atom-one-dark.css';

https://www.npmjs.com/package/highlight.js

저작자표시

'Front-end > Vanilla JS' 카테고리의 다른 글

[ JavaScript ] AutoComplete.js Input box 자동 완성 Plugin  (0) 2019.08.27
[ JavaScript ] 한글,영어,숫자,특수문자 구분 정규식 모음  (0) 2019.08.23
[ JavaScript ] Carousel.js Slider 플러그인  (1) 2019.08.21
[ JavaScript ] lotteryScratch.js 복권 스크레치 긁는 모션 모듈  (1) 2019.07.25
[ JavaScript ] 원시타입(primitive type)과 참조타입(reference type)  (1) 2019.07.25
'Front-end/Vanilla JS' Related Articles more
Comments