티스토리에 syntaxhighlighter 적용하기

기타 2009. 11. 9. 17:43

syntaxhighlighter 는 http://alexgorbatchev.com/wiki/SyntaxHighlighter 에서 다운로드 가능하며
티스토리에서 <pre> 태그를 통해 구문강조 효과를 보여준다.

다운로드 받은 파일을 압축 해제한뒤 script, style 폴더내의 파일들을 티스토리 스킨 관리의 파일 업로드 기능을 통해 업로드 한뒤
skin.html 소스에 업로드한 script, css 파일을 참조하는 소스를 추가해 준다.

- script, css 관련 파일 업로드

<SCRIPT src="./images/shCore.js" type=text/javascript></SCRIPT>
<SCRIPT src="./images/shBrushBash.js" type=text/javascript></SCRIPT>
<SCRIPT src="./images/shBrushCpp.js" type=text/javascript></SCRIPT>
<SCRIPT src="./images/shBrushCSharp.js" type=text/javascript></SCRIPT>
<SCRIPT src="./images/shBrushCss.js" type=text/javascript></SCRIPT>
<SCRIPT src="./images/shBrushDelphi.js" type=text/javascript></SCRIPT>
<SCRIPT src="./images/shBrushDiff.js" type=text/javascript></SCRIPT>
<SCRIPT src="./images/shBrushGroovy.js" type=text/javascript></SCRIPT>
<SCRIPT src="./images/shBrushJava.js" type=text/javascript></SCRIPT>
<SCRIPT src="./images/shBrushJScript.js" type=text/javascript></SCRIPT>
<SCRIPT src="./images/shBrushPhp.js" type=text/javascript></SCRIPT>
<SCRIPT src="./images/shBrushPlain.js" type=text/javascript></SCRIPT>
<SCRIPT src="./images/shBrushPython.js" type=text/javascript></SCRIPT>
<SCRIPT src="./images/shBrushRuby.js" type=text/javascript></SCRIPT>
<SCRIPT src="./images/shBrushScala.js" type=text/javascript></SCRIPT>
<SCRIPT src="./images/shBrushSql.js" type=text/javascript></SCRIPT>
<SCRIPT src="./images/shBrushVb.js" type=text/javascript></SCRIPT>
<SCRIPT src="./images/shBrushXml.js" type=text/javascript></SCRIPT>
<LINK href="./images/shCore.css" type=text/css rel=stylesheet>
<LINK href="./images/shThemeDefault.css" type=text/css rel=stylesheet>
<SCRIPT type=text/javascript>
  SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
  SyntaxHighlighter.all();
</SCRIPT>

참고로 <LINK href="./images/shThemeDefault.css" type=text/css rel=stylesheet> 부분에서 Theme css 파일을 설정하여 테마를 설정할 수 있다.
테마는 http://alexgorbatchev.com/wiki/SyntaxHighlighter:Themes:Default 에서 확인 가능하다.

- skin.html 수정
skin.html 에 추가

사용시에는 아래와 같이 pre 태그내에 class 속성에 brush 값을 설정하여 사용하면 된다.
<PRE class="brush: js"> 
     코드
</PRE>
brush class 에서 사용하는 class 명은 아래 link 에서 확인 가능하다.
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes

: