티스토리에 SyntaxHighlighter 3.0.83 설치하기 (쉬운설명)

원래 hslee.net 을 운영하다가.. 다시 티스토리로 넘어왔다. hslee.net 에 제로보드를 설치한후 Code Highlighter 을 사용하였는데 티스토리는 않되니까~~ 
 
1. 우선 http://alexgorbatchev.com/SyntaxHighlighter/download/ 여기에 접속해서 3.0.83 버전을 다운받는다.

 
2. 다운받고 압축을 풀면 아래와같은 폴더들이 있을것이다.

 여기서 필요한 폴더는 딱 두개이다.  scripts 와 styles

3. 티스토리 관리페이지에 들어간후 스킨->HTML/CSS 편집 으로 들어간다.

4. 아래 그림과 같이 HTML/CSS편집에 skin.html 에 아래코드를</body>와 </html> 사이에 코드를 추가해야 한다.

(아래 소스코드를 더블클릭하면 전체선택이 됨)

<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">

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

5. style.css 에 아무위치에나 아래코드를 추가해준다.

(
아래 소스코드를 더블클릭하면 전체선택이 됨)

div .syntaxhighlighter { overflow-y: hidden!important; overflow-x: auto!important; }

위 코드를 추가해주는 이유는 쓸데없이 스크롤이 생길수 있으니 방지하기 위해서이다.

6. 아까 다운받아 압축풀었던 파일을 Upload 해야한다.

위 그림처럼 파일 업로드 버튼을 눌른다.

7. scripts폴더의 전체 파일과 style폴더의 전체 파일을 업로드 해준다.

여기까지 했다면 셋팅은 다 끝났다.

이제 사용법에 대해 알아보겠다.

위 그림과 같이 글을 작성할때 HTML 을 체크해준다음 <pre>를 이용해 소스코드를 추가하면 된다..

<pre class="brush:언어>
소스코드내용~~~
</pre>

brush:언어 는 아래 태이블을 참조하자.

예를들어 c# 코드라면

<pre class="brush:csharp">
소스코드내용
</pre>

위 테이블을 참고해서 위와같이 하면 된다.

티스토리는 참 복잡하다 ㅡㅡ; 제로보드는 걍 플러그인 설치해서 사용하면 되는데...ㅡㅡ
어째든 이글을 보고 모두들 성공하길 바랍니다~~
않되는게 있따면!~ 댓글 달아주세요~~