티스토리 스킨 변경후 SyntaxHighlighter 설정하기

오랜만에 스킨을 변경했더니.. 여러가지 설정들이 다 날라가 버렸네요.. 에휴~

그중에서 SyntaxHighlighter를 이용한 소스코드 보여주는 부분이 전부다 이상해져버려서..
해당 설정 다시 하면서 내용 정리해 봅니다.

SyntaxHighlighter의 경우 3.0 버전까지 나와 있는 것 같은데요..
http://alexgorbatchev.com/SyntaxHighlighter/ 

기존 블로그들이 1.5.1 버전으로 되어 있어서 해당 버전으로 정리하도록 하겠습니다.  
설정 측면에서 보면 jQuery 관련된 코드 넣어주는 것 제외하고는 큰 차이는 없습니다.
http://code.google.com/p/syntaxhighlighter/ 

먼저 위 사이트에서 SyntaxhHighlighter 1.5.1 버전을 다운로드 합니다. rar 파일로 압축되어 있네요. 
압축을 풀면 다음과 같은 폴더들이 존재합니다. 



위 내용 중 Scripts 폴더와 Styles 폴더의 내용을 업로드하면 됩니다. 
업로드 위치는 티스토리의 "스킨" 메뉴의 "파일업로드"입니다.



 업로드가 끝나면 "HTML/CSS 편집모드"로 들어가서 먼저 CSS 를 아래와 같이 첨부합니다. 

<link type="text/css" rel="stylesheet" href="./images/SyntaxHighlighter.css"></link> 

이어서 맨 아래로 내려가 </body> 윗부분에 다음 코드를 추가합니다. 
<script class="javascript" src="./images/shCore.js"></script> <script class="javascript" src="./images/shBrushCSharp.js"></script> <script class="javascript" src="./images/shBrushCpp.js"></script> <script class="javascript" src="./images/shBrushCss.js"></script> <script class="javascript" src="./images/shBrushDelphi.js"></script> <script class="javascript" src="./images/shBrushJScript.js"></script> <script class="javascript" src="./images/shBrushJava.js"></script> <script class="javascript" src="./images/shBrushPhp.js"></script> <script class="javascript" src="./images/shBrushPython.js"></script> <script class="javascript" src="./images/shBrushRuby.js"></script> <script class="javascript" src="./images/shBrushSql.js"></script> <script class="javascript" src="./images/shBrushVb.js"></script> <script class="javascript" src="./images/shBrushXml.js"></script> <script class="javascript"> dp.SyntaxHighlighter.ClipboardSwf = './images/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script>

"저장"을 하고 나면 자유롭게 SyntaxHighliter를 사용할 수 있을 겁니다.
글쓰기에서 적용하는 방법은 다음에 기회되면 다시 올릴께요~

그럼.. 좋은 하루 되세요~