WEBDIR :: Highlight.js - 코드 구문 강조

코딩을 주로 다루는 분들은 이를 표기해주는 몇몇 플러그인들이나 라이브러리들을 이미 사용하고 계시거나 온라인 하이라이팅 서비스를 이용하고 계실겁니다. Highlight.js 또한 그런 라이브러리 중에 하나로 설치 경험을 서술합니다.

Highlight.js 소개

Highlight.js는 자바스크립트로 쓰여진 코드 구문 강조를 위한 라이브러리이다. 브라우저뿐만 아니라 서버에서도 잘 작동한다. 어떠한 프레임워크에도 의존하지 않고, 거의 모든 마크업에서 작동하며 자동 언어 감지 기능을 가지고 있다.

130개의 언어와 65가지의 스타일을 제공한다. Live Demo
자동으로 사용된 코드 구문을 찾아 알맞은 스타일로 표현한다.
여러가지 혼합된 코드에 대한 구문 강조가 가능하다.
node.js에서 사용 가능하다.
어떠한 마크업과도 작동한다.
어떠한 자바스크립트 프레임워크와도 호환된다.
모던 브라우저들, IE9 이상을 지원한다.

자세한 사용 설명법은 highlight.js 문서에서 확인할 수 있다.

Highlight.js 설치

홈페이지에 접속해서 Get Version 버튼을 클릭하면 Hosted와 Custom package의 두가지 방법을 거론하고 있다.

Hosted

일반적으로 사용되는 언어 22개를 미리 구성하여 CDN을 통해 호스팅하고 있다(Apache, Bash, C#, C++, CSS, CoffeeScript, Diff, HTML, XML, HTTP, Ini, JSON, Java, JavaScript, Makefile, Markdown, Nginx, Objective C, PHP, Perl, Python, Ruby, SQL 이 포함).

아래에 두개의 CDN이 있으니 원하는 것을 선택하여 <head> 에 삽입하면 된다.

cdnjs :

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

jsdelivr :

<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.7/styles/default.min.css">
<script src="//cdn.jsdelivr.net/highlight.js/8.7/highlight.min.js"></script>

기본 테마가 아닌 다른 스타일의 디자인을 이용하려면 highlight.js demo 페이지에서 Styles에 적용된 디자인들을 확인하고 마음에 드는 스타일의 이름을 기억하자. 이후에 테마파일의 파일명을 비교하여 CDN의 <link>의 css 파일명을 수정하면 된다.

아래는 서브라임텍스트의 테마를 설정한 예이다.

<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.7/styles/monokai_sublime.min.css">

마지막으로 Hightlight.js를 활성화하면 된다. 아래가 최종 코드이다.

<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.7/styles/monokai_sublime.min.css">
<script src="//cdn.jsdelivr.net/highlight.js/8.7/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Custom package

기본적으로 서비스되는 22개의 언어 이외에 추가로 구문 강조가 필요한 언어가 있다면 포함시킬 언어를 선택하고 이를 다운로드 받으면 된다. 다운로드 받은 파일은 highlight.pack.js 파일과 CSS 테마 파일들이 포함되어 있으니 자신의 계정에 올리고 이를 삽입하면 된다.

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Highlight.js 사용법

자동으로 페이지에 포함된 <pre><code> 를 찾아 구문강조를 적용하지만, 원하는 데로 작동하지 않는 경우가 종종있다. 이럴때는 class 속성을 이용하여 언어를 지정할 수 있다.

<pre><code class="html">...</code></pre>

지원되는 언어 클래스명은 class reference에서 확인할 수 있다.

만일 구문강조를 사용하고 싶지 않다면 nohighlight 클래스를 사용하면 된다.

<pre><code class="nohighlight">...</code></pre>

Highlight.js 커스텀 초기화

Highlight.js를 좀 더 조정할 필요가 있다면 highlightBlock과 configure 기능을 사용할 수 있다. 이 것은 언제 그리고 어떤 것을 구문강조할 것인가를 조정할 수 있다.

아래는 jQuery를 이용하여 initHighlightingOnLoad 호출과 유사한 방법을 소개한다.

$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

페이지에 작성된 어떤 마크업 태그도 <pre><code> 를 대신할 수 있다. 만일 줄바꿈을 보존하는 컨테이너(pre)를 사용하지 않는다면, <br> 태그를 사용하게 Highlight.js 설정을 변경해야 한다.

hljs.configure({useBR: true});

$('div.code').each(function(i, block) {
  hljs.highlightBlock(block);
});

다른 제공되는 옵션들은 configure 문서를 살펴보도록 하자.

IE8 미지원으로 인한 오류

최근의 라이브러리들은 IE 구버전에 대한 지원을 줄이고 있다. Highlight.js 또한 IE8에 대한 지원을 중지한지 오래되었고, 이로 인해 IE8이하 버전에서는 오류가 있음을 상태창에 나타낸다.

알림창이 뜨는 경고는 아니지만 이것이 거슬리다면 IE8 이하 버전에 대한 분기를 나눠 동적으로 스크립트를 추가하는 것을 생각해 볼 수 있다.

티스토리에서 사용시 유의점

티스토리나 그 밖의 CMS들에서는 편집기에서 HTML 모드를 따로 지원한다. 구문강조는 <pre><code> 태그를 삽입해야 하기 때문에 이 HTML 모드를 이용해서 작성해야 한다.

이때 문제가 되는 것이 구문강조가 될 코드내용이 HTML일 경우, <(시작태그) 와 >(종료태그) 를 & l t ; 와 & g t ; 로 모두 치환해줘야 한다(실제로는 띄워쓰기 하면 안된다). 이를 일일이 수정하는 것은 미련한 짓이고, HTML모드에서는 아래와 같이 기본형만 작성하고 다시 편집기 모드로 돌아가서 나머지 코드를 작성하면 된다.

<pre><code> 코드내용
</code></pre>

편집기 모드에서는 자동으로 시작태그와 종료태그를 치환해주기 때문에 일일이 수정할 필요가 없으며, 코드내용 부분을 지우고 실제 코드내용을 작성하면 된다.

편집기 모드에서 코드내용을 작성할 때는 엔터로 줄바꿈을 하면 안되고 Shift + Enter 를 이용해야 줄바꿈이 된다.

'웹코딩 > App,Plugin' 카테고리의 다른 글

Who's among.us - 실시간 접속자 방문통계 (0)	2015.08.12
TimelineJS - 시간의 흐름을 네비게이션화 (0)	2015.08.11
matchHeight - 요소간의 높이 통일화 (0)	2015.08.06
Holder - 클라이언트 측에서 이미지 예제 제공 (0)	2015.08.05
이미지 예제(placehold) 제공 웹서비스 (0)	2015.08.04