블로그팁: 티스토리에서 Google Syntax Highlighter 사용하기

블로깅을 하면서 Syntax Highlighter(code highlighter)를 사용할 일이 제법 많이 있습니다.
C/C++/C# 소스를 올리는 경우도 있고, HTML 소스나 css 설정을 올리는 경우도 있습니다.
물론, XML 소스를 올리는 경우도 있습니다.

태터툴즈를 사용하시는 분들은 CodeHighlight Plug-in을 사용하면 됩니다만,
티스토리에서는 이 플러그인을 지원하지 않습니다.

방법을 뒤지던 중 Google Code project로 개발된 Syntax Highlighter가 있다는 것을 알았습니다.
하루 동안의 삽질 끝에 이걸 티스토리에 적용할 방법을 알아냈습니다.
(위의 태터툴즈용 플러그인도 이 Google의 Highlighter를 활용한 것입니다)

Google Syntax Highlighter

이 코드는 순수하게 javascript로 작성되어 있기 때문에 설정을 하고 나면 아주 간편하게 사용할 수 있습니다.
속도가 약간 느리다는 약점이 있습니다만…

이것을 설치, 활용하는 절차는 아래와 같습니다.


1. Syntan Highlighter (이하 SH) 다운로드

SH에서 다운로드 가능합니다. : 클릭
현재 1.51까지 나와있습니다. : 다운로드


2. 필요한 파일 모으기

관련된 파일들(*.js, SyntaxHighlighter.css, clipboard.swf)를 한 폴더에 저장해야 합니다.
다운받은 SyntaxHighlighter_1.5.1.rar 파일의 압축을 풀면 dp.SyntaxHighlighter 아래에 Scripts, Styles, Uncompressed 폴더가 있습니다.

dp.SyntaxHighlighter - Scripts/Styles/Uncompressed

Scripts 폴더와 Uncompressed 폴더에는 같은 내용의 함수 파일들이 들어있는데, Uncompressed 폴더의 함수들이 사람이 읽기에 좀 더 편합니다. 설치할 때는 이 중에서 Scripts의 내용만 사용합니다.

폴더를 하나 만든 뒤에 Scripts 폴더에 있는 모든 파일들(*.js 13개, clipboard.swf)과 Styles 폴더에 있는 SyntaxHighlighter.css 파일을 몽땅 저장합니다.
이 때 별도의 서브 폴더를 만들 필요 없이 그냥 저장하면 됩니다.

위 화면은 c:\_sh_\ 폴더를 만들어서 필요한 파일을 저장한 화면입니다.


3. 파일 업로드

2번에서 c:\_sh_ 폴더에 저장한 파일 15개를 전부 업로드합니다.
업로드할 때는 스킨 메뉴에서 직접올리기 기능으로 업로드하면 됩니다.

티스토리는 파일을 업로드하면 핵심 파일들을 제외하면 모두 images 폴더에 저장합니다.
위의 화면에서 sh*.js 파일들이 images 폴더에 저장되어 있는 것을 확인할 수 있습니다.


4. 스킨파일(skin.html) 수정

티스토리에서 Google Code - Syntax Highlighter를 사용하려면 해당 javascript 코드를 스킨파일에 추가해야 합니다.
추가할 위치는 </body> 바로 앞입니다. 맨 앞에 집어넣으면 아무런 변화도 없습니다.

<!-- google code for syntaxhighlight -->
<link type="text/css" rel="stylesheet" href="./images/SyntaxHighlighter.css"></link>
<script language="javascript" src="./images/shCore.js"></script>
<script language="javascript" src="./images/shBrushCSharp.js"></script>
<script language="javascript" src="./images/shBrushXml.js"></script>
<script language="javascript" src="./images/shBrushCss.js"></script>
<script language="javascript" src="./images/shBrushCpp.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = './images/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<!-- google code for syntaxhighlight -->
</body>
</html>

이 코드는 Google SH - Usage에서 제시하는 코드와 약간 차이가 있습니다.
3번에서 언급한 저장 위치문제 때문에 폴더를 ./images/로 수정해야 합니다.

사용할 모든 언어를 다 정해도 되지만, 사용할 것만 올리면 조금이라도 가벼워집니다.
위에서는 C#, XML(HTML), CSS, C++ 용 js 파일만 삽입했습니다.

지원 가능한 언어는 Google SH - Languages를 참고하면 됩니다.


5. 코드의 삽입

해당 코드의 앞뒤에 <pre> 태그만 붙여주면 됩니다.

<pre name="code" class="html">
... some code here ...
</pre>

형식으로 코드를 삽입하면 됩니다.
< > 등의 문자는 &lt; &gt; 등의 코드로 입력해야 하므로 기본적인 입력은 WYSIWYG으로 하면 편합니다.
하지만, 자동으로 입력된 </br> 태그를 삭제해야 하므로 마무리는 HTML 모드로 해줘야 합니다.


6. 기타사항

<pre> 태그에 옵션을 추가해서 모양을 조절할 수 있습니다.
사용 가능한 옵션은 nogutter, nocontrols, collapse, firstline[value], showcolumns의 다섯 가지가 있으며, 콜론(:)으로 구분하고 여러 개의 옵션들을 붙여서 사용할 수 있습니다.
※ 위의 코드는 nogutter 옵선을 사용해서 행번호를 표시되지 않도록 했습니다.

더 자세한 사용법은 Google SH - Configuration을 참고하시기 바랍니다.

※ 기능을 보완하고 설치 과정을 수정했습니다. Code Highlighter 더 쉽게 사용하기를 읽어주세요