개발자를 위한 Syntax Highlighter 사용 방법

1. http://alexgorbatchev.com/SyntaxHighlighter/download/ 링크에서 Syntax Highlighter을 다운 받은다. (압축 파일 이고 압축을 풀면 javascript 파일과 css 파일로 구성 되어 있다. test.html 파일이 셈플 예제 이다.)

2. 티스트로 관리 메뉴에서 스킨 > HTML/CSS 편집 메뉴로 이동 한다.

3. 파일 업로드 탭에서 위에서 파일 업로드 버튼을 이용하여 받은 파일중 scripts, styles 폴더의 파일을 업로드 한다. (친절한 티스토리는 동시에 여러개의 파일 업로드가 가능하다. ^^)

4. HTML/CSS 편집 탭에서 스크립트 파일과 스타일시트 파일을 사용하겠다는 코드를 추가 한다.
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJavaProp.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushScala.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushVb.js"></script>
<script type="text/javascript" src="./images/shBrushXml.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>

5. 4번까지 완료 했다면 Syntax Highlighter을 사용할 준비 작업은 완료 됐습니다.

6. Syntax Highlighter 사용 하기
    글 작성시 HTML 편집 모드로 합니다.
    <pre class="brush: 언어 선택;">
     프로그램 코드
    </pre>
    이렇게 사용하시면 됩니다.