티스토리에서 highlight.js로 소스코드 넣기

프로그래머로써 소스코드 구글링을 하다보면, 게시글의 소스코드가 보기 간편하고 복사도 가능한 게시글을 선호하게 된다.

이렇게 소스코드를 보는 사람들에게 편의를 제공하기 위해, 티스토리에서 소스코드를 보기 간편하게 넣는 방법을 알아보자.

소스코드를 보기 간편하게 해주는 방법으로 대표적으로 Syntax Highlighter와  highlight.js가 있는데,

이 게시글에서는 개인적으로 더 선호하는 스타일의 highlight.js를 사용하는 방법을 소개할 것이다.

highlight.js를 사용한 소스코드의 모습은 다음과 같다.

/**
 * @author John Smith 
*/
package l2f.gameserver.model;

public abstract class L2Char extends L2Object {
  public static final Short ERROR = 0x0001;

  public void moveTo(int x, int y, int z) {
    _ai = null;
    log("Should not be called");
    if (1 > 5) { // wtf!?
      return;
    }
  }
}

highlight.js를 사용하기에 이전에 먼저 초기설정을 해주어야 한다. 초기설정을 해주는 방법은 다음과 같다.

1. 본인의 블로그의 '관리'에 들어가서 'HTML/CSS 편집'을 누른다.

2. HTML에 아래의 소스코드를 추가한 후 저장한다.

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

위의 코드는 기본적인 스타일를 사용하기 위한 코드이며, 만약 다른 스타일을 원한다면 코드를 수정해서 추가해야 한다.

기존 코드에서 'default.min.css' 를 '스타일의 이름.min.css'로 스타일 이름만 바꾸어 주면 된다.

스타일은 총 79개의 스타일이 있는데, https://highlightjs.org/static/demo/에서 원하는 스타일을 골라서 사용하면 된다.

만약 github 스타일의 코드를 원한다면, 다음과 같이 해주면 된다.

초기 설정이 끝났으면, 이제 게시글의 html에서 <pre><code class="언어이름">코드...</code></pre>를 사용하여 코드를 작성하면 된다.

예를 들어, JAVA를 사용하는 경우의 html 코드는 다음과 같다.

<pre><code class="java">/**
 * @author John Smith 
*/
package l2f.gameserver.model;

public abstract class L2Char extends L2Object {
  public static final Short ERROR = 0x0001;

  public void moveTo(int x, int y, int z) {
    _ai = null;
    log("Should not be called");
    if (1 > 5) { // wtf!?
      return;
    }
  }
}</code></pre>

highlight.js에서 지원하는 언어는 총 176개로 많은 언어를 지원하지만, 이 글에서 소개한 설정 방법으로는 많이 사용되는 언어 23가지만 사용할 수 있다.

지원되는 언어에 대해서도 https://highlightjs.org/static/demo/에서 확인할 수 있다.

이 글에서 소개한 설정 방법으로 사용가능한 언어 목록은 위 사이트의 common에 있는 언어들이다.

실질적으로 common에 있는 언어들 이외에 다른 언어를 사용할 일은 거의 없겠지만,

만약 사용할 일이 생긴다면 https://highlightjs.org에서 원하는 언어를 포함한 라이브러리를 다운받아서 사용하면 된다.