티스토리에 Google Syntax Highlighter 적용하기

프로그램 소스 코드를 포함하여 포스팅 할 때
특수문자 삽입, 줄 맞춤 등등에 굉장히 신경을 써야하고,
글쓴이의 생각과 소스 코드가 얽혀 어지럽게 보일 수 있는데
Syntax Highlighter를 사용하면 코드를 깔끔하게 보여줄 수 있습니다.

설치를 위해서 Google Syntax Highlighter 홈페이지로 들어가
상단의 Download 탭을 눌러 최신버젼을 다운받습니다.

다운받은 파일의 압축을 풀어
티스토리 관리자 페이지 - 스킨 - 직접올리기 페이지로 들어가
Scripts, Styles 폴더에 있는 모든 파일을 업로드 합니다. (images 폴더에 저장됨)

업로드가 완료 되었으면,
티스토리 관리자 페이지 - 스킨 - HTML/CSS 편집 페이지로 들어가
skin.html 소스의 </body> 바로 윗 줄에 아래 코드를 삽입합니다.
※ 모든 brush script 삽입시 페이지 로딩에 영향을 줄 수 있으므로
   아래 script 중 자신이 사용할 것만 삽입하는 것이 좋다고 합니다.

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

사용법은 Google Syntax Highlighter 홈페이지를 참고하시고요,

더 자세한 설치법은 bluenlive님의 아래 포스트를 참고하세요.
- 블로그팁 : 티스토리에서 Google Syntax Highlighter 사용하기
- 블로그팁 : Code Highlighter 더 쉽게 사용하기