SyntaxHighlighter 2.0 적용하기

SyntaxHighlighter는 블로그 같은 곳에서 소스코드를 인용할 일이 있을 때 유용한 도구이다. 2.0버전 부터는 http://alexgorbatchev.com/wiki/SyntaxHighlighter 에서 관리되고 있으며 관련 파일도 호스팅 해 준다. 그래서 필요 파일들을 웹상의 어딘가 올리려고 삽질 하지 않아도 된다. 만세~

1.5버전에서 업그레이드 되면서 사용법이 좀 변했는데 2.0버전 사용법과 주의사항을 간략히 알아보자.

먼저 아래의 내용을 웹사이트의 적당한 곳에 끼워 넣는다. 이 때 주의할 점은 대소문자가 틀리면 안된다는 것이다.

<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.320/scripts/clipboard.swf';
SyntaxHighlighter.all();
dp.SyntaxHighlighter.HighlightAll('code');
//]]>
</script>

shBrushPython.js 같은 것들을 사용하고 있는데 자신이 사용하고 싶은 언어를 추가하면 된다. 가령 루비는 shBrushRuby.js 와 같이...

그 후 코드를 삽입하고 싶은 곳에 아래와 같이 넣으면 된다.

<pre class="brush: js">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
...
SyntaxHighlighter.all();
</pre>

그러면 아래와 같은 화면을 보실 수 있을 것이다.

SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
...
SyntaxHighlighter.all();

가끔 콘솔창에서 명령을 실행시키는 화면을 넣고 싶을때가 있다. 그럴때는 아래와 같이 brush를 plain으로 하고 gutter를 false로 주면 된다. 그리고 오토링크가 기본으로 켜져 있는데 auto-links를 false로 주면 끌 수 있다.

<pre class="brush: plain; gutter: false; auto-links: false;">
$ ls -al
...
</pre>

그러면 아래와 같이 콘솔창과 비슷하게 라인 번호가 안 붙은 모습을 볼 수 있다.

$ ls -al
...

콘솔창이라면 검정색 바탕화면인데 이런 것은 custom brush로 만들 수 있단다. 누가 만들어 놓으면 가져와서 써야지~ 이 놈의 게으름이란..