블로그에 코드 하이라이트 적용하기(highlight.js)

수동으로 적용하게 된 계기

포스팅을 하면서 github-markdown.css를 활용하여 작성을 해 오고, syntax highlight는 tistory에서 제공하는 플러그인을 활용하였습니다.

하지만 블로그 테마를 Book Club에서 #1으로 변경하니 syntax highlight의 첫 줄에서 공백이 일어나는 현상이 발생했습니다.

기술 블로그를 운영하는 입장에서 code highlight는 매우 중요한 요소이므로 자동으로 적용이 잘 되지 않는 이 현상을 수동으로 적용시켜 해결하고, 기본적으로 tistory에서 제공하는 것 외에 다양한 syntax highlight을 선택해 적용해야겠다고 생각하였습니다.

highlight.js 설정

highlight.org 접속

highlight.org 공식사이트로 이동합니다.

Get version 11.3.1

현재 가장 최신 버전인 Get version 11.3.1 버튼을 클릭합니다.

con.js 코드 복사

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

cdnjs, jsdelivr, uppkg이렇게 3가지 방법이 있지만 cdnjs 를 활용할 것이므로 cdnjs 코드를 복사합니다.

하지만 이 코드만 있다고 실행이 되는 것이 아닙니다. 링크를 받아오기만 한 것이므로 이 코드를 실행시기기 위한 javaScript 코드 또한 필요합니다.

highlight.js GitHub 접속

highlight.js GitHub 사이트에 접속한 후 highlight.js repository에 접속합니다.

highlightAll()

repository를 접속한 후 하단으로 화면을 내리다보면 Basic Usage 가 나옵니다.

The bare minimum for using highlight.js on a web page is linking to the library along with one of the themes and calling highlightAll:

웹 페이지에서 highlight.js을 사용하려면 highlightAll 코드를 사용해야한다고 명시하고 있습니다.

This will find and highlight code inside of <pre><code> tags; it tries to detect the language automatically. If automatic detection doesn’t work for you, or you simply prefer to be explicit, you can specify the language manually in the using the class attribute:

<pre><code> 태그 안의 hightlight code를 찾아주고 자동으로 언어를 감지하여 설정해주고 만약 적용되지 않았다면 사용자가 원하는 언어를 class 속성에 추가를 하면 된다고 합니다.

highlight.js 코드 완성

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

highlight.org의 복사한 cdnjs 코드를 실행시키기 위해서 <script>hljs.highlightAll();</script> 를 추가하여 위와 같은 형태의 코드를 만듭니다.

사용자가 원하는 css 선택

highlight.js -> src -> styles

src 파일을 클릭합니다.

그리고 styles 파일을 클릭합니다.

css 파일 종류 파악

highlight.js/src/styles/ 혹은 highlight.js/src/styles/base16 에서 다양한 css 파일들을 볼 수 있습니다.

블로그에 highlight.js 적용

css 바꾸는 예시

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

위와 같은 코드에서 css가 default 로 되어있습니다. 기본 설정을 사용하는 것이 아니기 때문에 css를 바꿔서 적용을 하여야 합니다.

적용을 할 때 GitHub에 올라와 있는 파일명이 default.css 파일이더라도 코드에 작성을 할 땐 min을 추가하여서 default.min.css 라고 써야 합니다.

highlight.js/src/styles/

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

vs.css를 적용하는 예시입니다.

앞에서 보았던 highlight.js/src/styles/ 에서 사용자가 원하는 css를 선택해 styles/default.min.css 라고 되어있는 부분을 예를 들어 styles/vs.min.css 로 바꿉니다.

highlight.js/src/styles/base16

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/base16/github.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

base16/github.css를 적용하는 예시입니다.

마찬가지로 highlight.js/src/styles/base16 에서 사용자가 원하는 css 파일을 적용하고 싶다면 styles/default.min.css 라고 되어있는 부분을 예를 들어 styles/base16/github.min.css 로 바꿉니다.

필자는 base16/github.css 를 선택했습니다.

꾸미기 -> 스킨 편집

Tistory 블로그를 예시로 설명합니다.

사용자의 티스토리 블로그의 관리에서 꾸미기의 스킨 편집을 클릭합니다.

html 편집

html 편집을 클릭합니다.

highlight.js script 삽입

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/base16/github.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

HTML 내에 삽입을 합니다. 그리고 적용 버튼을 누릅니다.

결과

초반에 발생 했던 들여쓰기 즉 공백 현상이 일어나지 않고 잘 적용된 모습을 볼 수 있습니다.