Tistory에서 Syntax Highlighter 3.0 설치및 적용하기

소스코드 올릴때 보기 좋게 해주는 tool인 Syntax Highlighter 설치 및 적용방법에 대해 알아보았습니다.

1. Syntax Highlighter 설치

최신버전인 3.0.83 버전을 다운받고 압축을 풉니다.

syntaxhighlighter_3.0.83.zip

압축을 다 푼 후 목록을 확인해 봅니다.

2. 파일 업로드

파일 업로드를 하기위해서 

관리페이지 -> 꾸미기 -> HTML/CSS편집 -> 파일업로드  로 이동합니다.

여기서 압축 푼 파일에서 styles 폴더안에 모든 .css 파일과 scripts 폴더안에 모든 .js 파일을 업로드 합니다.

3. 소스 넣기

관리페이지 -> 꾸미기 -> HTML/CSS편집 -> HTML/CSS

첫번째로, 스킨 적용하기 입니다.

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

 

위의 주소를 복사해 head와 head 사이에서 title위에 넣어 줍니다.

※ Syntax Highlighter 에서는 여러가지 스킨을 적용할 수 있는데 나는 Midnight스킨으로 골랐다.

  그래서 shCoreMidnight.css 을 넣었습니다.  

태마확인 : http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

이곳에 들어가서 마음에 드는 스킨을 고른  후 shCore□□□□□.css 로 넣어주면 됩니다.

 

  두번째로. 

<!-- SyntaxHighlighter 시작 --> <SCRIPT type=text/javascript src="./images/shCore.js" script="" <=""> <script type="text/javascript" src="./images/shAutoloader.js"</SCRIPT> <SCRIPT type=text/javascript> //<![CDATA[ SyntaxHighlighter.autoloader( 'actionscript3 as3 ./images/shBrushAS3.js', 'bash shell ./images/shBrushBash.js', 'cf coldfusion ./images/shBrushColdFusion.js', 'c-sharp csharp ./images/shBrushCSharp.js', 'cpp c ./images/shBrushCpp.js', 'css ./images/shBrushCss.js', 'delphi pas pascal ./images/shBrushDelphi.js', 'diff patch ./images/shBrushDiff.js', 'erl erlang ./images/shBrushErlang.js', 'groovy ./images/shBrushGroovy.js', 'js jscript javascript ./images/shBrushJScript.js', 'java ./images/shBrushJava.js', 'jfx javafx ./images/shBrushJavaFX.js', 'perl pl ./images/shBrushPerl.js', 'php ./images/shBrushPhp.js', 'plain text ./images/shBrushPlain.js', 'ps powershell ./images/shBrushPowerShell.js', 'py python ./images/shBrushPython.js', 'ruby rails ror rb ./images/shBrushRuby.js', 'scala ./images/shBrushScala.js', 'sql ./images/shBrushSql.js', 'vb vbnet ./images/shBrushVb.js', 'xml xhtml xslt html ./images/shBrushXml.js' ); // SyntaxHighlighter.config.bloggerMode = true; // SyntaxHighlighter.config.stripBrs = true; // SyntaxHighlighter.defaults['html-script'] = True; SyntaxHighlighter.all(); //]]< </SCRIPT> <!-- SyntaxHighlighter 끝 -->

위의 소스를 복사해서 </body>위에있는 </s_t3>위에 넣어줍니다.

 

4. 적용하기

자 이제 다 적용했습니다! 테스트만 해보면 됩니다.
<pre class="brush: java"> class java { } </pre>

쓰기모드에서 html로 전환 후 위 코드와 같이 작성하고 미리보기를 해봅니다.

 위 그림처럼 출력된다면 성공입니다 ^_^!!  (aaa 는 무시하셔도 됩니다..)

알아두실점은, 블로그 스킨을 변경할 때 마다 Syntax Highlighter를 다시 적용해줘야 한다는 점 입니다 ^_^;