Agile2Robust

텍스트큐브에 코드를 넣고, 이 코드를 highlight하는 방법이 몇 가지 있다. 검색을 해 보면 가장 많이 사용되는 방법은 syntax highlighter를 사용하는 것으로 보이고 그 사용법은 여기에서 볼 수 있다. 비록 티스토리에서 사용하는 방법을 설명하기는 했지만 설치형 텍스트큐브에서도 별 문제 없이 사용이 가능한 것으로 보인다.

그런데, 이 방법에서 마음에 들지 않았던 것은 태그를 <pre> 혹은 <textarea>를 사용해야 한다는 점이다. 내가 이 블로그에 포스팅을 할 때는 주로 TextMate에서 Markdown을 사용해서 글을 적은 후에 HTML로 변환해서 올리는데 (사실 텍스트큐브 기본 편집기는 <p> 태그를 쓰지 않고 <br /> 태그를 두 번 써서 단락을 구분하는데, 이게 마음에 들지 않아서 Markdown을 쓴다), 이렇게 하면 코드를 집어넣었을 때 <pre><code> 이렇게 두 개의 태그가 들어가기 때문이다.

그래서 구글 검색을 좀 해 봤는데, Highlight.js라는 자바스크립트를 이용하는 방법이 있다는 것을 알게 되었다. 특징이 코드 부분을 자동으로 인식하고 자동으로 하이라이팅해 주는 것이라고 하는데, 나는 뭐든 자동으로 하는건 그렇게 미덥지 않게 여기기 때문에 이 부분은 크게 매력적이지 않았고, 설치가 쉽고 간단하다는 것이 마음에 들어서 텍스트큐브에 적용해 봤다.

적용하는 방법은 간단하다.

우선 파일을 받은 후에 업로드하는 것이 먼저일 것이다. 파일을 다운로드했으면 압축을 푼 후에 해당되는 스킨의 디렉토리에 업로드한다. 그리고, 스킨 파일을 편집하여 아래 내용을 집어넣는다.

<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript">
  initHighlightingOnLoad();
</script>

이렇게 하면 모든 언어에 대한 설정을 불러들이기 때문에 로딩에 시간이 좀 걸릴 수 있다. 만약, 특정한 언어 코드만 사용한다면 해당 언어를 아래와 같이 지정해 줌으로써 로딩 시간을 줄일 수 있다.

<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript">
  initHighlightingOnLoad('html', 'css', 'ruby', 'python');
</script>

이제 적당한 css 파일을 불러주기만 하면 된다. 포함된 css의 사용 예는 이 페이지에서 볼 수 있고, 만약 (나처럼) default를 사용하기로 했다면 스킨의 헤더 부분에 다음과 같이 적어주면 된다.

<link rel="stylesheet" type="text/css" href="./styles/default.css" />

참고) 스킨 파일을 편집하는 것은 로컬에서 한 후에 서버에 올리거나, 서버의 명령행에서 직접 하는 것을 권한다. 웹에서 편집을 하는 경우에는 스킨 디렉토리에 customize하는 디렉토리를 만들고 이 안에 변경된 스킨을 넣어서 이걸 적용하는 듯 하다. 나는 이걸 몰라서, 원 스킨 디렉토리의 파일을 고치고 나서 이게 왜 반영이 안되는지를 한참 고민을 했었다.

코드를 적은 후에는 <pre><code class='ruby'>와 같이 원하는 언어 이름을 명시적으로 적어주는 것이 좋다. 만약 하이라이트하고 싶지 않은 경우라면 <pre><code class='no-highlight'>와 같이 하면 된다.

이 정도의 일이라면 간단하게 플러그인을 만들 수도 있을 것 같은데, 내가 텍스트큐브 플러그인을 만드는데 시간을 쓰고 싶지 않은 관계로, 그냥 방법만 공개한다. 만약 텍스트큐브 플러그인에 대해 잘 아는 분이 플러그인으로 만들어주신다면 훨씬 편하게 사용할 수 있을 것 같기는 하다.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.