소스코드 강조 : SyntaxHighlighter

-- 수정 중 -- 

 원래 http://pupustory.tistory.com/48을 읽고 그대로 따라 하려다가 SyntaxHighlighter의 2.x대의 업데이트 된 버전이 있어서 약간 수정했다. 옛날 버전으로 설치하려는 분들은 여전히 원글대로 하면 된다.

1. SyntaxHighlighter를 다운로드 한다. (아래 링크)
    http://alexgorbatchev.com/wiki/SyntaxHighlighter
2. 압축을 풀고, scripts와 styles디렉토리의 파일들을 스킨>파일올리기로 올린다.
3. 스킨 메뉴의 HTML/CSS편집을 선택하고, skin.html의 head 부분에 아래 코드를 넣어둔다.

	<link type="text/css" rel="stylesheet" href="./images/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.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/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>
	<script type="text/javascript">
		SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
		SyntaxHighlighter.config.tagName = 'pre';
		SyntaxHighlighter.defaults['auto-links'] = false;
		SyntaxHighlighter.all();
	</script>

4. 이후에 소스코드는 HTML의 pre 태그에 class="brush: c;"속성을 주면 된다.
SyntaxHighlighter.config.tagName에 pre대신에 textarea나 xmp를 넣을 수도 있는데, 그럴 경우에는 소스 코드를 입력하는 태그도 textarea나 xmp를 사용해야만 한다. (pre와 textarea, xmp의 차이는 웹 검색을 해보면 알 수 있다.)

* pre 사용 예제

<pre class="brush: c;">
#include <stdio.h>
#include <stdlib.h>
int main()
{
	printf("Hello tistory\n");
	return EXIT_SUCCESS;
}
</pre>

적용된 화면

#include <stdio.h>
#include <stdlib.h>
int main()
{
	printf("Hello tistory\n");
	return EXIT_SUCCESS;
}

5. brush속성이 소스코드의 언어 종류가 된다. (브러시 종류 : http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes)
자주 쓰이는 브러시로는 c, cpp, shell, java, text 등등이 있다.

* 참고
스킨 메뉴 편집하는 부분에서 shThemeDefault.css 스타일 파일이 기본 색상을 의미한다.
현재 2.1.364버전에서는 7개의 색상 테마를 가지고 있으며 종류는 shThemeDefault shThemeDjango shThemeEclipse shThemeEmacs shThemeFadeToGrey shThemeMidnight shThemeRDark가 있다. 만일 어두운 색상계열이 좋다면 shThemeFadeToGrey가 좋을 것이다.
만일 shThemeDefault.css 대신에 shThemeFadeToGrey.css를 사용하면 다음과 같이 적어주면 된다.

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