티스토리에서 SyntaxHighlighter 사용하는 방법

SyntaxHighlighter 다운로드
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download

다운로드 후 압축을 풀면 scripts, src, styles디렉토리가 생성된다.

Tistory 관리자 화면에서 스킨 -> HTML/CSS편집 으로 들어간다.
파일 업로드를 이용해서 scripts, src, styles 디렉토리 안의 모든 파일들을 업로드 한다(이때 자동으로 tistory 계정의 images 디렉토리로 업로드된다).

HTML/CSS 편집에서
<head>와 </head>사이에 아래의 내용을 복사해서 붙여넣는다.
<!-- code syntaxhighlighter -->
<script type="text/javascript" src="./images/shCore.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/shBrushPhp.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/shBrushXml.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css"/>
<link type="text/css" rel="stylesheet" href="./images/shThemeFadeToGrey.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!-- code syntaxhighlighter -->

테마 변경시 위의 script중에 <link type="text/css" rel="stylesheet" href="./images/shThemeFadeToGrey.css"/> 이 부분을 수정한다.
참조 : http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

이제 블로그에서 글을 작성할 때 소스코드 부분은 사용언어에 맞게 HTML모드에서 아래와 같이 적어주면 된다.
<pre class="brush: c-sharp;">
... source code ...
</pre>

브러쉬 목록
분류 사용가능 brush명 
 필요 파일
Bash/shell bash, shell shBrushBash.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js


실제 사용 예 
function test() : String
{
	return 10;
}

// 출력
int ViewMessage(char *msg)
{
        printf("%s\n", msg);
}

'유용한 정보' 카테고리의 다른 글

아이폰4 기능 체크 리스트  (1) 2010.09.13
ASCII CODE에서 제어문자 이름 정리  (0) 2010.09.02
노트북 동작 클럭이 반으로 설정되어 있을 때 해결  (0) 2010.05.31
Windows 환경에서 TAR, GZIP 으로 데이터 백업하기  (0) 2010.04.06
[노하우] 취직보다 중요한 퇴직의 십계명!  (0) 2010.03.30

+ Recent posts

티스토리툴바