블로그에 소스코드를 깔끔하게 삽입하는 방법 - highlightis

블로그에 소스코드를 깔끔하게 삽입하는 방법 - highlightjs

개발 블로그이다 보니 포스팅 본문에 소스코드를 삽입해야할 상황이 자주 발생한다. 이번 포스팅에서는 이러한 상황에 사용되는 여러 Syntax Highlighter 중 사용하기 위한 설정이 편리하며 심플한 'Highlightjs'를 소개하고자 한다.

Highlightjs

Syntax highlighting for the Web

공식 사이트의 소개와 같이 Highlightjs는 웹 구문을 강조하여 표시하는 기능을 수행한다.

Highlightjs의 특징을 소개해드리자면 다음과 같다.

• 176가지의 언어와 79개의 스타일 지원
• 자동 언어 감지 지원
• 다중 언어 코드 강조 표시 지원
• node.js에서 사용 가능
• 마크업과 함께 작동
• 모든 자바스크립트 프레임워크와 호환 가능

물론 장점만 있는 것은 아니다. 소스코드의 줄 번호를 지원하지 않는다. 저작자의 말에 따르면 줄 번호는 보기 지저분하고, 코멘트로 해결할 수 있는데 굳이 넣을 이유가 있냐고 주장하는데 나는 이 말에 동의한다.

포스팅의 본문에 삽입되는 소스코드의 경우 대부분 줄 번호가 필요한 만큼 길지 않기 떄문이다. 또한 본인이 보기에는 줄 번호가 없는 코드가 더 깔끔하기 때문이다.

Highlightjs 사용법

1. 공식사이트에서 highlight.js를 다운받아 사용
2. CDN(Content Delivery Network)에 등록된 파일을 사용

1. 공식사이트에서 highlight.js를 다운받아 사용

위 링크를 클릭하면 다운로드 페이지가 뜨는데 아래의 화면과 같이 자신의 사용 용도에 맞게 패키지(지원언어) 설정을 하여 다운로드 받을 수 있다는 장점이 있다.

원하는 언어에 체크를 한 뒤 하단의 [Download] 버튼을 클릭하면 압축파일을 내려받을 수 있다.

Node.js의 경우에는 별로의 NPM 모듈을 이용하여 설치가 가능하다.

npm install highlight.js

파일 다운로드가 완료되면 자신의 블로그에 JS 파일과 CSS 파일을 업로드하고, 페이지 소스코드에 업로드 한 파일들을 포함하는 태그를 작성하여 추가해주면 된다. (아래 CDN주소 추가 소스코드 참고)

2. CDN(Content Delivery Network)에 등록된 파일을 사용

본인은 CDN에 등록된 파일을 사용하여 블로그에 JS 파일과 CSS 파일을 추가해주었다. CDN주소와 추가하는 소스코드는 다음 아래를 참고하면 된다.

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

* 위의 CSS 링크된 주소의 마지막 부분을 보면 'default.min.css'로 되어 있는데 이는 기본 스타일을 뜻한다. 만약 다른 스타일을 설정하고 싶으면 'default' 부분을 원하는 스타일로 변경하여 추가해주면된다. (ex: github, googlecode, obsidian... )

여기까지 파일 설정이 완료되었으면 이제 실제 소스코드를 추가시에 알아야하는 사항에 대해 알아보도록 하겠다.

<pre>와 <code> 태그로 작성하려는 소스코드를 감싸주면 끝이다. 자동 언어 감지를 지원하기 때문에 따로 언어 설정을 해주지 않아도 되지만 highlightjs가 언어를 잘 인식하지 못하는 경우도 있으니 다음과 같이 <code> 태그의 class 이름을 "언어"로 추가하여 준다.

작성 예시 (JAVA)

<pre><code class="java">
/* HelloMyeonguni.java
 *
 * highlight.js Test Class
 */

public class HelloMyeonguni
{
    public static void main(String[] args) {
        printHello();
    }

    public static void printHello() {
        System.out.println("Hello Myeonguni.com");
    }
}</code></pre>

작성 결과

/* HelloMyeonguni.java
 *
 * highlight.js Test Class
 */

public class HelloMyeonguni
{
    public static void main(String[] args) {
        printHello();
    }

    public static void printHello() {
        System.out.println("Hello Myeonguni.com");
    }
}

위와 같이 소스코드를 포스팅의 본문에 깔끔하게 삽입한 결과를 볼수 있다. 그런데 사용에 주의해야할 점이 있다. 바로 pre/code 태그 안에 또 html 태그나 부등호 같은 기호가 들어가면 이를 escape 해주어야 한다. 이게 좀 귀찮은 일이긴 하지만 본인은 이런 상황이 익숙해져 본인 만의 escape 프로그램을 만들어 사용 중에 있다. 이 외에도 이러한 이슈를 해결하기 위해 escape를 지원해주는 온라인 서비스가 존재하기도 한다.

이 밖에 다른 주의사항으로는 <pre> 태그의 마진이 너무 크게 느껴질 수 있다는 것? 해당 사항은 본인의 블로그 CSS에서 pre 태그에 대한 설정을 변경하면 해결이 된다.

그럼, 여기까지 해서 [블로그에 소스코드를 깔끔하게 삽입하는 방법 - highlightis]에 대한 포스팅을 마치도록 하겠다.

참고

• https://highlightjs.org
• http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php
• http://myeonguni.tistory.com/1546