Tistory에 Syntax Highlighter 3.0.83 이용하는 방법

코드를 게시하는데 유용하고 가독성을 높여주는 프로그램 중에 하나가 Syntax Highlighter 이다.
이것을 이용하려면 우선 아래의 사이트에서 Sytax Highlighter 최신버전을 다운받습니다.
 http://alexgorbatchev.com/SyntaxHighlighter/ 
그리고 티스토리 계정의 [스킨 - HTML/CSS편집]에 들어갑니다.

그리고 위와 같이 파일 업로드를 통해서 다운받은 압축의 내용중에 scripts와 styles 폴더안에 있는 파일을 모두 업로드합니다.

 

skin.html 부분의 시작 부분에 보면 </head>가 있는데 그 위쪽에 아래와 같은 코드를 입력합니다.

<script type="text/javascript" src="./images/shCore.js"></script> 
<script type="text/javascript" src="./images/shBrushAS3.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/shBrushJavaFX.js"></script> 
<script type="text/javascript" src="./images/shBrushJScript.js"></script> 
<script type="text/javascript" src="./images/shBrushPerl.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/shBrushPowerShell.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" src="./images/shCore.js"></script> 
<script type="text/javascript" src="./images/shLegacy.js"></script> 
<link href="./images/shCore.css" rel="stylesheet" type="text/css" /> 
<link href="./images/shThemeRDark.css" rel="stylesheet" type="text/css" />

그리고 다시 skin.html의 가장 하단 부분을 보면 </body>가 있고 그 윗 부분에 아래의 코드를 첨부합니다.

 <script type="text/javascript"> 
    SyntaxHighlighter.all(); 
    dp.SyntaxHighlighter.HighlightAll('code'); 
</script>

이제 설치하는 것이 완료 되었습니다.


※사용하는 방법
html 문서로 코드를 작성한다.
예)
<pre class="brush:cpp">
//이곳에 소스코드를 그대로 붙여넣으면 된다.
</pre>

"brush:java"라고 하면 java로 인식하고 코드를 색칠한다.
지원 되는 언어들은 아래 표를 참조

중요 !
여기서 중요한 것은 예를들어 #include<stdio.h> 와 같은 것을 넣을 때 그냥 넣으면 안되고
<, > 는 각각 &lt;, &gt; (각각 less than과 greater than을 뜻한다.)으로 나타내야 한다.