Syntax Highlighter이 뭐냐면… 그냥 소스코드 예쁘게 뿌려주는거다. 이 글에서도 자주 쓰이니 알아서 판단하시고.

일단 티스토리는 Syntax Highlighter를 제공하지 않는다. 플러그인을 마음대로 설치할 수도 없으니 물건너간 줄 알았으나…
찾아보니까 된다 카더라 ‘ㅅ’ 그러니까 스킨 뜯어고치면 된다.

소스 홈페이지 : http://alexgorbatchev.com/SyntaxHighlighter/ (오픈소스로 공개중이다. 감사하도록.)

1. 설치방법

설정 – 스킨 – HTML/CSS 편집 들어간 후, </body>와 </html> 사이에 다음 내용을 추가해 준다.

<link rel='stylesheet' type='text/css' href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' />
<link rel='stylesheet' type='text/css' href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.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/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>

설치끝. 진짜로. 이게 전부다.

2. 사용방법

우선 편집기에서 소스를 쭉 작성한다. < 를 &lt; 로 작성해야 하는데, 이건 티스토리 편집기에서 자동으로 치환해 준다.
그리고 HTML 모드에서 위아래를 <pre> – </pre> 태그로 묶어주는데, 코드 종류에 따라 태그 클래스를 미묘하게 바꿔줘야 한다.

CPP 코드 : <pre class="brush: cpp"> - </pre>
HTML : <pre class="brush: html"> - </pre>
PHP : <pre class="brush: php"> - </pre>

이런 식.

정확하게는 위에서 추가해 준 브러시 타입만 사용할 수 있다. 저 위 소스 잘 보면 shBrush___.js 를 삽입하는걸 볼 수 있는데 이 부분.
다른쪽(Ruby라거나…) 쓰는 블로그라면 알아서 홈페이지 뒤져서 바꿔주면 되겠다.
(설마 코드 다루는 블로그 주인장이 저 정도 응용력도 없진 않겠지…)

파이어폭스 사용시, 코드 뒤에 <br /> 붙는건 지워줘야 한다. 아니면 아래처럼 소스에 한 줄 추가해주면 알아서 삭제하고 파싱해 준다.

<script type="text/javascript">
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.all();
</script>

3. 그리고

코드 유지보수하는게 Alex Gorbatchev란 사람인데, 월 트래픽이 80GB가 넘게 발생하고 덕분에 월 40달러씩 돈내고 있다고 무지하게 투덜거리고 있다.
PayPal 쓰는 사람이라면 맥주 한 잔쯤 사 주는게 어떠한가.