tistory에서 SyntaxHighlighter 2.0을 적용하여 코드를 이쁘게 보이기

다른 곳에도 많이 있는데 찾기 귀찮아서 정리 해둔다.

1. 아래 링크에서 소스를 다운 받는다.
http://code.google.com/p/syntaxhighlighter/

직접 다운 : http://alexgorbatchev.com/downloads/grab.php?name=sh

2. 모든 파일(*.css;*.js;*.png;*.swf)을 스킨폴더로 업로드 한다.
관리자 > 스킨 > HTML/CSS편집 > 파일업로드

3. HTML/CSS편집에서 head태그 사이(title태그 밑)에 아래 코드를 넣어준다.
<!-- SyntaxHighlighter_2.0.320 Include souce Start --> <script type="text/javascript" src="./images/shCore.js"></script> <script type="text/javascript" src="./images/shLegacy.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/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"> window.onload = function(){ SyntaxHighlighter.all(); dp.SyntaxHighlighter.HighlightAll('code'); } </script> <!-- SyntaxHighlighter_2.0.320 Include source End -->

4. textarea, pre 태그들을 이용하여 코드를 나타낸다.
C++이 아닌 다른 언어를 표현하길 원한다면 아래 링크를 참조한다.
http://code.google.com/p/syntaxhighlighter/wiki/Languages

<TEXTAREA class="cpp" name="code" rows="10" cols="60"> #include <iostream> int main() { std::cout << "Hello World" << std::endl; return 0; } </TEXTAREA>

<pre class="brush:cpp">
#include <iostream>

int main()
{
    std::cout << "Hello World" << std::endl;
    return 0;
}
</pre>