Syntax Highlighting

2015. 12. 21. 19:15

Syntax highlighting은 한동안 쓰다가 불편해서 중단했었다. 설치 불편한거야 어찌어찌 하면되는데 사용할때마다 class에 뭔가를 꼭 써줘야하는 건 많이 불편했다. 그러다가 자연스럽게 사용할 수 있는 좋은 라이브러리 하나 발견해서 그동안 사용했던 라이브러리들을 쭉 정리해보려고 한다.

SyntaxHighlighter

SyntaxHighlighter는 블로그가 떠오르던 시절 글쓰는 개발자의 가려운 부분을 긁어준 고마운 녀석이다. 티스토리에서 이 라이브러리가 한창 유행했었는데 그 뒤로 바꾸지 않은 사람도 있어서 아직도 이따금 사용 중인 블로그를 보곤한다.

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>

지금이야 이렇게 스크립트 3개만 로딩하면 사용이 가능하지만 처음에는 그렇지 않았다. sh 로 시작하는 수많은 스크립트와 css를 로드해야했다.

<pre class="brush: js">
/**
 * SyntaxHighlighter
 */
function foo()
{
	if (counter <= 10)
		return;
	// it works!
}
</pre>

적용은 pre 태그에 class로 highlight 할 언어를 지정하면 된다. 위 예에서는 brush: js 로 javascript를 지정했다. 이 라이브러리는 참 고마웠지만 귀찮은 것은 사실이다. 일단 설치가 힘들었고(지금은 쉽지만) 사용도 어렵다. 일일이 class를 넣어줘야하는데 언어까지 지정을 해야한다. auto detect가 되는 라이브러리가 나타나는 순간 갈아타게 되었다.

prettyprint

prettyprint는 구글에서 만든 라이브러리이다. 사용하기가 편해서 이 라이브러리를 발견하자마자 SyntaxHighlighter 사용을 중단하고 이 것으로 갈아탔다. 만족도가 높아서 한동안 이를 사용했다. 원래는 구글코드를 repository로 사용하고 있었는데 구글코드를 종료하면서 이 프로젝트도 github로 옮겨갔다.

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

여러가지 장점이 있지만 가장 큰 장점은 간단한 사용방법이다. 위 스크립트를 로드하도록 하기만 하면 <pre class="prettyprint"> 와 같이 prettyprint 라는 클래스를 가지고 있는 pre 태그의 내용을 highlight 한다.

<pre class="prettyprint">class Voila {
public:
  // Voila
  static const string VOILA = "Voila";

  // will not interfere with embedded <a href="#voila2">tags</a>.
}</pre>

이 역시 단점을 말하자면 pre에 prettyprint라는 클래스를 지정해야 한다는거다. SyntaxHighlighter보다야 편하다고 하지만 위지윅에서 코드를 지원하더라도 클래스 변경은 지원하지 않고 마크다운도 마찬가지다. 결국 글을 작성한 후에 html코드를 보면서 모든 pre에 클래스를 추가해줘야했다. 점점 귀찮음을 느끼다가 최근에 prettyprint 사용을 중단하게 되었다.

Highlight.js

Highlight.js는 우연히 클래스 지정없이도 highlight되는 곳을 발견하면서 찾게 되었다. 알고보니 그곳에서도 Highlight.js를 사용한 것이었다.

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

prettyprint보다는 로드할 파일이 하나 많지만 cdn까지 세팅해두었으니 설정은 아주 간단한 편이다. prettyprint만큼이나 다양한 테마를 지원하는데 위 css의 default를 원하는 테마로 변경하면 된다. 테마 파일명은 요기서 찾을 수 있다.

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

사용할때 code에 언어를 클래스로 명시할 수 있지만 굳이 하지않아도 detect한다.

// 1)
<script>hljs.initHighlightingOnLoad();</script>

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

highlight하기 위해서는 위 두가지 방법 중 하나를 사용할 수 있는데 1은 pre code 를 찾아서 변환한다. 2는 변환할 block을 직접 지정할 수 있는 방법이다. 2덕분에 prettyprint나 SyntaxHighlighter 보다는 확실히 자유롭게 사용할 수 있다.

너무 만족스러워 바로 적용해보았다. 그동안 작성했던 모든 글에 싹 적용이 되었다. 흐뭇하다.

Gist

마지막으로 하나 더! Gist는 github에서 제공하는 소스 snippet 기능인데 embed를 제공하면서 마치 Syntax highlight 기능처럼 블로그에서 사용이 가능하다. github 에서도 그러라고 만든기능같다.

<script src="https://gist.github.com/joostory/9ec38ac95deadc165a00.js"></script>

위와 같이 작성하면 아래와 같이 보이게 된다.

github에서 제공하는 기능인만큼 지원하는 언어폭도 아주 넒고 적용방법이 깔끔하다. 특히 코드를 변경할 때 gist에서만 수정하면 블로그에도 깔끔하게 수정되어서 들어가는 점이 좋다.

단점은 소스코드가 글에 포함이 되지 않아서 다른 읽기도구를 사용하는 경우에는 아무것도 보이지 않는다는 점이다. 검색엔진이 검색할 때도 마찬가지다. script로 삽입을 해야하기 때문에 html 코드 수정을 해야하는 점도 있긴하지만 코드에 일일이 class 집어 넣는 것 보다는 나아보인다.

bitbucket도 snippet기능을 제공하기는 하는데 embed기능은 없다.