티스토리에 구문강조된 소스코드 올리는 방법을 알아보자.

블로그에 소스코드를 이쁘게 올리고 싶은 욕심이 많이 있었는데, 이쁘게 올리는 방법을 찾아 보았다.

찾아보니 SyntaxHighlighter 라는 프로그램으로 블로그에 구문강조된 소스코드를 올릴 수 있는다는 것을 알고 어떻게 적용하는지 알아보도록 하겠다. 

아래와 같은 형태로 소스코드를 올릴 수 있는 것이다.

1. SyntaxHighlighter를 다운로드 하기.

아래 URL에 접속해 SyntaxHighlighter 3.0.83을 다운 받는다. 현재 버전은 3.0.83 이다

http://alexgorbatchev.com/SyntaxHighlighter/download/

Click here to download를 클릭 하면 다운 받을 수있다. 다운 받은 후 압축을 풀어준다.

2. 티스토리에 파일업로드 하기.

티스토리 관리 모드로 들어가서 HTML/CSS 편집 -> 파일업로드  -> +추가 를 클릭한다. 파일을 추가할수 있는 창이 뜨게 되는데 다운 받아 압축을 풀었던 폴더로 이동해서 scripts 폴더와 styles 폴더에 있는 파일들을 전부 추가해준다. 

scripts 폴더는 SyntaxHighlighter에서 사용할 소스의 문법 종류에 대한 파일들이다.

styles 폴더는 SyntaxHighlighter에서 소스가 표시되는 스타일에 관한 파일 들이다.

3. HTML/CSS에 코드 추가하기.

파일추가가 완료되면 HTML/CSS 탭을 클릭 하여 skin.html 의 </body>와 </html> 사이에 아래의 코드를 추가해 준다. 

<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/shBrushPython.js"></script> <script type="text/javascript" src="./images/shBrushSql.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"> SyntaxHighlighter.all(); </script>

<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css"> 이 코드에서 shThemeDefault.css 이파일만 styles폴더에 있던 파일로 바꾸면 SyntaxHighlighter의 style을 바꿀수 있다. 나중에 한번 해보길 바란다.

그리고 style.css에 @charset "utf-8"; 아래에 아래 코드를 추가한다. 크롬을 이요하는 사용자들을 위해서라고 한다.

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

4. SyntaxHighlighter 사용해 보기.

위의 내용들을 다 했다면 이제 직접 사용해보는 일만 남았다. 글쓰는 페이지로 이동해 HTML 모드로 아래 코드를 입력해 보자.

<pre class="brush:c"> #include <stdio.h> int main() {      printf("Hellow World\n"):      return 0; } </pre>

결과는 아래와 같이 나오게 된다.

아래와 같은 폼으로 소스코드를 입력하면 되는것 이다.

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

사용언어에 입력가능한 언어는 아래 사진을 참고하길 바란다. Brush aliases를 입력하면 된다.