설치 방법은 3단계.
1. 다운로드 받아 압축 풀기
2. 티스토리의 스킨에 업로드
3. 스킨 수정하기
1. 다운로드 받아 압축풀기
SyntaxHighLighter의 홈페이지, 다운로드
압축을 풀면 다음 그림처럼 세 개의 폴더가 존재한다.
이 중에서 Scripts에 있는 파일과 Styles에 있는 파일을 티스토리로 옮길 것이다. Uncompressed 폴더 내용은 페이지 로딩 속도를 고려하면 굳이 올릴 필요가 없다.
2. 티스토리에 올리고 스킨 수정
자신의 블로그 관리자 모드로 들어가서 상단 메뉴 중 [스킨] 항목을 선택한 후 하위 메뉴에서 | 직접 올리기 | 를 선택한다. 스크롤 바를 내리면 아래 그림과 같이 [파일 업로드] 단추가 보인다. 클릭한 후 좀 전에 압축을 푼 Scripts 폴더와 Styles 폴더의 모든 파일을 선택하여 업로드한다. (이상하게 firefox에서는 이 단계에서 파일 업로드가 안되는 것을 경험하였다. 어쩔 수 없이 IE에서 작업을 했으며, 원인은 잘 모르겠다.)
다음은 스킨을 수정해야 한다. | 직접 올리기 | 옆에 있는 | HTML/CSS 편집 |을 선택한다.
상단의 skin.html 화면에서
<link href="./style.css" rel="stylesheet" type="text/css" /> 문장을 찾을 수 있다. 앞에서 대략 대여섯줄 근방에 있다. 이 문장 뒤에 다음 문장을 추가한다.
<link type="text/css" rel="stylesheet" href="./images/SyntaxHighlighter.css"></link>
그 다음 옆의 슬라이드 바를 끝까지 내리면
</s_t3>
</body>
</html> 로 끝나는 것을 확인할 수 있다.
</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 = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
마쳤으면 [저장하기]를 클릭하고 블로그 화면이 원래대로 나오는지를 확인한다.
자 이제 적용 단계이다.
아쉽게도 위지윅 모드에서 바로 적용하는 방법은 없다. 글을 쓰다가 소스 코드를 넣고 싶은 부분에서 메뉴바에 [EDIT] 버튼을 클릭하여 HTML 편집 모드로 전환한다. 그 다음 다음과 같은 문장을 추가한다.
<textarea name="code" class="Python" cols="60" rows="10">
코드는 여기에 복사한다.
</textarea>
여기서 소스예를 Python으로 들기 때문에 class 항목에 Python을 적었고, 다른 언어일 경우는 해당 언어를 지정하면 된다. C++, C#, Delphi, Java, PHP, Python, Ruby, VB, HTML, XML 등을 지원한다.
또한 rows 항목은 굳이 소스에 딱 맞게 지정할 필요는 없다. 적절히 크기 넣어주면 알아서 소스에 번호를 붙인 후 소스 끝에서 깔끔하게 마무리를 해 준다.
