소스 코드 구문 강조 #3 - highlight.js 사용법


지난 포스팅에서 소스 코드 구문 강조를 위한 몇 가지 솔루션들의 스타일들과 간략한 특징을 알아보았습니다.

그럼 이번에는 그 중 highlight.js 사용법에 대해 알아보겠습니다.

아래는 highlight.js를 적용한 모습입니다.  vs 테마를 사용하였습니다.

highlight.js (vs)

#include <stdio.h>
 
int _tmain(int argc, _TCHAR* argv[])
{
    int nTemp = 0; // Comment : Dummy
    char szTemp[50] = "http://reslee.kr";
 
    printf("Hello World - %s\n", szTemp);
 
    return 0;
}


우선 highlight.js를 사용하기 위해서 필요한 파일들을 준비합니다.

아래 다운로드 사이트를 방문하여 highlight.js 모듈을 다운 받습니다.

https://highlightjs.org/download/

※ 만약 highlight.js에서 Common에 분류되어 있는 언어들을 위한 경우라면 이미 호스팅 되어있는 highlight.js 모듈을 사용할 수도 있습니다. 이 경우는 아래 html 수정하는 부분을 참고하도록 합니다. 단, 이 경우 기본 테마만 사용할 수 있습니다.

다운로드 사이트를 보면 Custom Package라고 해서 소스 코드 구문 강조를 사용할 언어들을 선택하고 그에 맞는 파일들을 다운로드 할 수 있습니다.

당연히 선택을 많이 할 수록 highlight.js의 모듈 용량은 늘어납니다.


다운로드된 파일은 zip파일로 압축된 형태일 것 입니다. (예 - highlight.zip)

이를 임의의 폴더에 압축해제 합니다.

우리가 필요한 파일들은 highlight.pack.js 파일과 styles 폴더에 있는 파일입니다.

highlight.js의 장점이라면 필요한 파일이 단 2개 뿐이라는 것 입니다.

이 전 포스팅에 SyntaxHighlighter에 대해 알아보았는데 이 경우 소스 코드 구문 강조가 필요한 언어 별로 .js 파일이 필요했습니다.


웹서버에 해당 파일들을 편하신 위치에 업로드 하시면 되는데 설명은 티스토리를 기준으로 하겠습니다.

(호스팅된 파일을 이용하신다면 이 과정은 건너뛰어도 됩니다.)


티스토리에 파일을 업로드 하는 방법은 우선 관리자 페이지에서 HTML/CSS 편집 메뉴를 선택합니다.


HTML/CSS 화면 우측 상단에 파일업로드를 선택하고


우측 하단에 추가 버튼을 클릭하여 파일을 업로드 합니다.

티스토리에 파일을 업로드 할 수 있는 용량은 20MB 제한입니다.


티스토리는 폴더상태로 업로드를 할 수 없고 특정 폴더를 생성하지도 못하므로 파일단위로 업로드 해야 합니다.

첫 번째로 압축해제 후 생성된 자바스크립트 파일 highlight.pack.js을 업로드 합니다.


마찬가지로 styles 폴더에 있는 css 파일들을 업로드 합니다.

모두 업로드 하셔도 되고 마음에 드는 테마 .css 파일만 업로드 하셔도 됩니다.

하지만 사용하실 테마 .css만 업로드 하는 것이 깔끔하고 좋겠지요 ?

테마를 미리 보고 싶으시면 아래 공식 사이트에 들어가셔서 스타일을 클릭하시면 차례대로 테마가 변경됩니다.

https://highlightjs.org/

아래 그림의 노란색 네모 부분을 클릭하시면 됩니다. 왼쪽에 보이는 language 부분을 클릭하시면 구문 강조가 적용된 언어들을 차례대로 확인해 보실 수 있습니다.

저는 vs.css만 업로드 하였습니다.


업로드가 완료되면 HTML/CSS 화면 우측 상단에 HTML을 선택합니다.


이제 HTML 소스에 <HEAD> 태그(HEAD 시작 태그)와 </HEAD> 태그(HEAD 마지막 태그) 사이에 아래 코드를 추가합니다.

호스팅된 SyntaxHighlighter 모듈 사용법 (클릭)

<link type="text/css" rel="stylesheet" href="./images/vs.css"/>
<script type="text/javascript" src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
1번 라인은 테마를 적용하는 부분입니다. 업로드 하신 .css 파일 이름으로 변경하세요. 저는 vs.css를 적용한 경우입니다.

3번 라인은 highlight.js를 초기화 해주는 부분입니다.

그리고 저장 버튼을 꼭 눌러 주세요.


이제 highlight.js를 사용할 준비가 끝났습니다.

실제로 티스토리에서 사용하는 방법을 알아 보겠습니다.

코드를 작성할 위치에서 외부컨텐츠를 누릅니다.

html로 선택된 상태에서 pre 태그와 code 태그를 사용합니다.

이 code 태그 안에 표시될 소스 코드가 삽입되면 됩니다.

하지만 외부컨텐츠 삽입 화면에서 소스 코드를 추가할 경우 꺽쇠 즉, "<"과 ">"이 포함되면 인식하는데 문제가 발생합니다.

따라서 "<"는 그에 대응하는 특수 코드 &lt를 ">"는 &gt를 사용해야 합니다.

소스 코드에 포함된 꺽쇠를 모두 특수 코드로 고쳐야 된다고 생각하면 참 암울합니다.

특히 html 코드는...

그래서 아래와 같이 pre 태그와 code 태그만 작성하고 확인을 누룹니다.

SyntaxHighlighter의 경우 구문 강조가 필요한 언어를 명시해 주는 부분이 있었지만 highlight.js는 자동으로 언어 구분을 해줍니다.

따라서 별도의 언어 명시를 할 필요 없이 pre와 code 태그만 사용하시면 됩니다.


어쨋든 외부컨텐츠에서 pre 태그와 code 태그만 입력하면 아래 그림과 같이 회색 네모 상자가 표시됩니다.

우리는 이 회색 네모 상자 안에 아래와 같이 소스 코드를 복사해 넣습니다.

이제 미리보기를 해보시거나 발행하여 글을 확인해 보세요.

highlight.js가 적용된 모습이 보이시나요 ?

제대로 보이신다면 highlight.js 적용에 성공하신 겁니다.

다음 포스팅에서는 syntaxhighlight.in 사용법에 대해 알아보도록 하겠습니다.

+ Recent posts