Highlight.js 티스토리 블로그에 적용하기

안녕하세요!

이번 글에서는 Syntax Highlighter 하고 비슷한 기능을 하는 Highlight.js 를 소개하고, 블로그에 적용하는 방법을 설명하도록 하겠습니다.

(Highlight.js 공식 홈페이지)

웹서핑을 하다가 Crayon Syntax Highlighter 이라는 코드 강조 플러그인을 발견했는데, 아쉽게도 이 플러그인은 워드프레스(Wordpress)에서만 사용이 가능한 워드프레스 플러그인이였습니다. 정말 딱 제가 원하는 그런 깔끔한 코드 강조 기능을 가지고 있어서 매우 탐났는데.. 티스토리는 티스토리일 뿐... ㅠ_ㅠ

그러다가 찾은게 바로 Highlight.js 입니다. 물론, Syntax highlighter 플러그인도 기능 면에서 뒤쳐지는건 아닙니다. 모두 각자의 장단점이 있고, 저는 Highlight.js 가 더 깔끔하고 맘에 드는 테마를 가지고 있어서 Highlight.js 를 택하게 되었습니다.

우선적으로, Highlight.js 라이브러리의 장점을 제 맘대로 골라봤습니다.

• 테마(style)가 다양하다. - 굳이 커스터마이징을 하지 않아도 될만큼 다양한 테마가 만들어져 있습니다.
• 사용 가능한 언어가 다양하다. - 8.8.0 버전 기준으로 135개의 언어에 대해 강조 기능을 사용할 수 있습니다.
• 문서화가 잘 되어있다. - Highlight.js 라이브러리에 대한 문서화가 되어 있어, 동작 원리나 API 사용 등에 대한 모든 정보를 알 수 있습니다.

(Highlight.js 라이브러리 API 및 기능에 대한 모든 설명과 예제가 수록되어 있는 문서)

Highlight.js 라이브러리가 문서화된 페이지에는 정말로 다양한 정보들이 있습니다.

API가 어떻게 구현되었는지, 어떻게 사용하는지에 대한 정보부터 사용자가 기능을 수정하려면 어떻게 해야하는지까지도 아주 자세하게 설명하고 있습니다.

이렇게 문서화가 아주 잘 되어있기 때문에 언어나 테마가 지금처럼 아주 많이 있지는 않을까라는 생각을 해봅니다.

* 문서화 페이지는 직접 들어가셔서 훑어보시는 것이 도움이 많이 될거라 생각됩니다.

그리고 Syntax Highlighter 의 파일 형식은 각 언어에 대한 브러시 js 파일(shBrushCpp.js 등)이 따로 존재하는 모듈 형식이고, Highlight.js 는 사용할 언어(다운로드할 때 사용자가 직접 선택합니다)가 코어 파일에 모두 포함되는 단일 파일 형식입니다.

그렇기 때문에 정말 사용할 언어만 골라서 사용하는 것이 필요합니다. (사용하지도 않는 언어를 모두 추가하면 크기가 상당히 커집니다.. 크기가 커지면 그만큼 페이지 로딩 속도도 느려지겠죠?)

* 이 부분이 Highlight.js 에서 아쉬운 부분입니다. 하지만, 코드를 수정하면 Syntax Highlighter 처럼 모듈 형식으로 사용할 수도 있습니다.

그럼 이제 Highlight.js 라이브러리를 다운로드하도록 하겠습니다.

Highlight.js 라이브러리 홈페이지에 있는

이 버튼을 누르면 아래와 같은 페이지로 이동됩니다.

(Highlight.js 라이브러리를 다운로드 하기 전 코드 강조를 적용할 언어를 선택할 수 있습니다)

이 페이지는 총 두 가지 그룹(Common, Other)으로 되어있습니다.

Common 그룹에는 주로 사용되는 언어가 있고 Other 그룹에는 Common 그룹에 포함되지 않은 언어가 있습니다.

기본적으로, Common 그룹에 있는 언어들은 모두 선택되어 있는데 잘 보시고, 사용할 언어만 선택하도록 합니다.

(기본으로 선택되어 있는 상태에서 다운로드를 하게 되면 라이브러리의 크기가 41KB 입니다.)

사용할 언어를 선택한 후에는 페이지를 조금만 밑으로 내리면 "Download" 버튼이 있는데, 짐작하셨겠지만 다운로드 버튼을 누르면 정말 다운로드가 진행됩니다.

(Highlight.js 를 다운로드하면 압축 형태로 다운로드하게 된다. 위 사진은 압축을 푼 결과)

다운로드받은 highlight.zip 파일의 압축을 풀게되면 폴더에는 다음과 같은 파일들이 있습니다.

• CHANGES.md - 버전이 업데이트되면서 변경된 내역이 기록되어 있음
• highlight.pack.js - 코어 파일. 선택한 언어들을 포함한 채로 크기가 최소화되어 있음
  
• LICENSE - Highlight.js 라이브러리에 대한 라이센스 정보가 기록되어 있음
• README.md / README.ru.md - "읽어주세요" 파일의 영문 / 러시아어 버전

디렉터리로는 styles 디렉터리가 있는데, 이 디렉터리에는 사용 가능한 테마(스타일)가 들어있습니다.

8.8.0 버전 기준으로 현재 65개의 테마를 사용할 수 있고, 이 테마는 Highlight.js 홈페이지에서 직접 보실 수 있습니다.

링크: Highlight.js 홈페이지 테마 미리보기

(지원하는 언어 및 사용 가능한 테마를 미리 적용해볼 수 있는 Highlight.js 데모 페이지)

이제 코어 파일과 테마 파일을 블로그에 업로드할 차례입니다.

테마 CSS 파일의 경우 데모 페이지 -> 소스 보기 를 통해 구하실 수 있습니다.

마음에 드는 테마를 선택하셨다면 이제 코어 파일인 highlight.pack.js 파일과 선택한 테마 CSS 파일을 업로드하도록 하겠습니다.

저는 Ir Black 테마를 선택했습니다.

(코어 파일인 highlight.pack.js 파일과 테마 파일인 ir_black.css 파일이 업로드된 것을 알 수 있다)

코어 파일과 테마 파일 업로드가 끝났다면 이제 실질적으로 블로그에 Highlight.js 라이브러리의 기능을 적용할 차례인데요. 아쉽게도 .. 파일을 업로드했다고 해서 바로 사용할 수 있는 것이 아닙니다.

우선, 스킨 편집 메뉴의 HTML 탭으로 이동하여 아래의 코드를 입력합니다.

<!--
	업로드한 코어 파일(highlight.pack.js)을 불러옵니다.
	이 스크립트는 Highlight.js 라이브러리를 사용하기 위해 필수적입니다.
-->
<script src="./images/highlight.js"></script>

<!--
	여기에는 사용할 테마의 CSS 파일(ir_black.css)을 불러옵니다.
-->
<link rel="stylesheet" href="./images/ir_black.css" />

<!--
	페이지가 로드될 때 강조를 적용하기 위해 필요한 코드입니다.
-->
<script>hljs.initHighlightingOnLoad();</script>

(코드 적용 기능을 사용하기 위해 코어 파일과 테마 파일 그리고 기능을 활성화시키는 코드를 입력했습니다)

HTML 편집이 끝내셨다면 이제 편집기에서 코드 강조를 적용하는 일만 남았습니다.

코드 강조를 적용하는 것은 어렵지 않습니다~~

우선, 편집기에서 다음과 같은 코드를 작성합니다. (HTML 모드에서 작성해야 합니다)

(pre 및 code 태그 사이에 아무 문자나 최소한 2개 이상을 적어준다)

그 다음 pre 및 code 태그 사이에 입력한 문자 ㅁㅁㅁㅁ 사이에 강조하려는 코드를 입력합니다. 이 단계에선 HTML 모드가 아닌 글쓰기 모드에서 수행합니다.

(입력한 문자 사이에 코드를 입력한다. HTML 편집 모드가 아님에 유의!!)

코드 입력이 끝났다면 코드 앞뒤로 있는 입력한 문자를 지워줍니다. 이 작업은 글쓰기 상태에서 편집을 쉽게 하기 위함입니다.

안하신다면 말리지는 않겠지만 강조하려는 언어가 HTML이나 XML 같은 언어인 경우 HTML 모드에서 코드를 작성했다간 코드 날아감 + 적용 안되는 대참사가 발생할 수 있으니 조심하시기 바랍니다.

아래 코드는 위 예제를 적용한 예제입니다.

pre, code 태그 사이에 코드를 입력하고 강조 언어는 html로 설정했습니다.

<pre>
	<!--
		code 태그의 class 속성이 바로 강조할 언어입니다.
		여기서는 HTML 을 강조할 것이니 html으로 입력했습니다~!
	-->
	<code class="html">
		<!-- 여기에 HTML 언어로 작성된 코드를 입력합니다. -->
		<h1>Bold + Big Text</h1>
	</code>
</pre>

이상으로 Highlight.js 라이브러리를 티스토리 블로그에 적용하는 방법을 소개해 드렸습니다.

Highlight.js 라이브러리는 앞서 말씀드렸듯 문서화가 잘되어 있기 때문에 사용자가 마음만 먹으면 입맛대로 수정이 가능합니다.

... 언제일지 모르는 다음 글에서는 Highlight.js 라이브러리를 가지고 커스터마이징하는 방법을 알려드리도록 하겠습니다.

긴 글 읽어주셔서 감사합니다. 환절기 날씨가 많이 춥습니다. 일교차도 심하구요. 감기 조심하세요!!