WEB개발이야기/웹퍼블리싱

highlight.js를 활용하여 Code구문 강조하기

어쩌다보니여기까지~ 2018. 11. 7. 18:42
반응형

highlight.js 홈페이지

많은 개발자들이 웹사이트에 글을 작성할때 코드 부분을 실제 에디터에서 보이는 것 처럼 강조하기 위한 방법으로 highlight.js을 사용합니다.

이것을 사용하기 위해 npm 또는 yarn을 사용하여 프로젝트에 포함시키는 경우도 있지만 제가 소개하는 방법은 가장 간단하게 CDN을 활용하여 index.html에 적용하여 사용할 수 있는 쉬운 방법니다.

CDN이란 : CDN은 콘텐츠 전송 네트워크(Content delivery network 또는 content distribution network (CDN))의 약자로 CDN 서버에 javascript나 images, sound등등..의 컨텐츠를 올려놓고 여러 위치에 동일한 파일을 분산시켜 저장해 놓습니다. 사용자가 해당 컨텐츠 파일을 요청할 경우 사용자와 가장 가까운 서버에서 요청한 파일을 전달해 줌으로서 굉장히 빠른 컨텐츠 서비스를 할 수 있게 해줍니다.
보통은 유료로 사용하나 jquery, Bootstrap 등등, 많은 사람들이 사용하는 유용한 컨텐츠를 무료로 서비스 해주는 CDN 서버도 있습니다. 그중에 highlight.js는 cdnjs.cloudflare.com에서 해주고 있습니다. ( https://cdnjs.com/libraries/highlight.js )

cdnjs.cloudflare.com 홈페이지

실제 적용사례

아래의 형태가 코드를 강조한 것이라고 보시면 됩니다. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

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

</head>
<body>

    <!-- HTML코드를 강조하여 보여줄때.. -->
    <pre><code class="html">...</code></pre>

    <!-- css코드를 강조하여 보여줄때.. -->
    <pre><code class="css">...</code></pre>

</body>
</html>

적용 방법

적용의 핵심 요소는 아래와 같습니다.
아래처럼 적용하면 일단 구문강조된 코드를 만나실 수 있습니다. 

<head>

    <!-- head태그 안에 아래의 3줄의 코드를 넣습니다.  -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/vs2015.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>

</head>
<body>

    <!-- body태그 안에 아래 코드를 넣습니다. class에 원하는 랭귀지명을 넣으면 됩니다. -->
    <pre><code class="html">...</code></pre>

</body>

심화 방법

highlight.js는 다양한 언어(개발 랭귀지)와 다양한 스타일을 제공합니다. 기본으로 제공하는 언어와 스타일만 가지고도 충분히 사용이 가능하지만 기본으로 제공하지 않는 언어는 추가를 해야만 적용된 모습을 볼 수 있습니다.

만약 bash언어의 하이라이트를 주려면 아래와 같이 javascript를 추가해 주면됩니다.

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/vs2015.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

  <!-- 아래의 랭귀지 js를 추가하면 bash도 코드강조를 해 줌  -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/languages/bash.min.js"></script>

  <script>hljs.initHighlightingOnLoad();</script>

만약 표시하는 강조구문의 색상이나 형태를 다른 스타일, 예를 들면 github 처럼 나오게 하려면 아래와같이 적용을 하면 됩니다.

  <!-- 아래의 스타일 태그로 교체를 하면 github형태로 보여줌  -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/languages/bash.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>

참조 사이트

  • highlight.js 웹사이트 : https://highlightjs.org
  • CDN서비스 : https://cdnjs.com/libraries/highlight.js
    • 해당 웹사이트에 접속하면 리스트가 쭈~ㄱ 나오는데 그중에 위에 있는 js파일들은 언어(랭귀지)를 적용하는 코드이고 아래쪽에 있는 CSS파일들은 스타일을 적용하는 코드 입니다.