블로그에 코드를 넣고 syntax highlighter 를 적용하자.

제 블로그만 그런것이 아니고 대부분의 컴퓨터 언어를 다루는 블로그들이 자신들 만의 코드를 블로그상에 올릴때 대부분 사용하는 것이 바로 Syntax Highlight 기능 입니다.
이건 블로그 자체에서 구현된 것이 아니라 별도의 자바스크립트를 붙여야 구동이 가능하죠.

아주 예전에 구글에서 돌던 코드를 붙여서 사용하다가 얼마전에 새로운 버젼으로 갈아타게 되었는데요.
그걸 티스토리에 적용하는 방법을 알아 보도록 하겠습니다.

먼저 제작자의 홈페이지에서 해당 소스를 다운로드 받습니다.
상용으로 사용하지 않을 경우 제제는 없습니다만, 자신이 쓰는데 도움이 되었다면 1달러 이상 기부 할 수 있습니다.

다운로드 받으면 LGPLv3.txt 및 test.html 과 scripts , src, styles 폴더가 보입니다.
이걸 일일 히 블로그에 올려야 하는데 티스토리는 별도의 폴더를 만들수 없기 때문에 images 안에 이미지로 올리게 됩니다.
관리자 메뉴의 스킨>HTML/CSS 편집으로 진입하도록 합니다.

HTML/CSS 편집 탭이 아닌 파일 업로드 탭을 클릭하여 scripts , src, style 안에 있는 파일들을 모두 올려 줍니다.

이제 다시 HTML/CSS 편집 탭으로 이동하여 skin.html 맨 아래 부분에 다음과 같이 지정합니다.

저의 경운 쓰는 브러쉬 타입이 얼마 없으므로 모든걸 다 걸지는 않았습니다.
코드는 다음과 같습니다.

<!-- code syntaxhighlighter -->
<script class="text/javascript" src="./images/shCore.js"></script>
<script class="text/javascript" src="./images/shBrushBash.js"></script>
<script class="text/javascript" src="./images/shBrushCpp.js"></script>
<script class="text/javascript" src="./images/shBrushDelphi.js"></script>
<script class="text/javascript" src="./images/shBrushPlain.js"></script>
<script class="text/javascript" src="./images/shBrushPhp.js"></script>
<script class="text/javascript" src="./images/shBrushJava.js"></script>
<script class="text/javascript" src="./images/shBrushXml.js"></script>
<script class="text/javascript" src="./images/shBrushCss.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css"/>
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!-- code syntaxhighlighter -->

위 코드를 참조로 수정하였다면 이제 저장합니다.
티스토리같은 경우 자동으로 HTML 코드가 변경 되는것들이 많으므로 수정에 약간 어려움이 있긴 합니다.

이제 Syntax highlighter를 적용하는 두가지 방법이 있습니다.

<pre class="brush: c-sharp;">
function test() : String
{
    return 10;
}
</pre>

<script type="syntaxhighlighter" class="brush: cpp;"><![CDATA[
function test() : String
{
    return 10;
}
]]></script>

위 두 방법은 모두 글을 쓸때 HTML 모드로 써야 하며, 작동을 제대로 됩니다만, C/C++ 코드 사용시 <pre ... > 로 시작되는 태그는 좀 문제가 발생 합니다.
#include<stdio.h> 와 같은 문장이 <pre .. > 태그 내에 있다면 마지막에 자동으로 </stdio.h> 라는 태그가 붙어 버리기 때문에 살짝 짜증이 나죠.
때문에 저는 티스토리 에서는 <script ...> 를 사용합니다.

테스트는 다음과 같이 직접 코드를 <script .. > </script> 내의 CDATA 태그로 잘 묶어서 올리는 방법 뿐이겠죠.
아래와 같이 블로그 글이 나온다면 성공 입니다.