티스토리 블로그 글에 소스코드 표현하기

포스팅을 하면서 가끔 소스코드를 복사 붙여넣기 할때

간지를 위해 에디터툴과 같이 줄번호도 함꼐 표기되는 것을 원하게 된다..

이를 한방에 해결해 주는 팁..

1. SyntaxHightlighter 다운

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

귀차니즘인 경우 현재 최신버전인 3.0.83을 아래를 클릭해서 다운로드..

syntaxhighlighter_3.0.83.zip

2. 다운받은 syntaxhighlighter 압축을 해제

3. 관리 > 꾸미기 > HTML/CSS 편집 > 파일 업로드 메뉴레 들어가서 추가를 클릭!

4. 압축을 푼 syntaxhighlighter 폴더의 scripts와 styles 안의 파일들을 모두 선택해서 업로드!

5. HTML/CSS 메뉴에서 skin.html 편집

</body> 태그 바로 위에 아래의 스크립트를 넣을 것이므로

컨트롤+f4로 /body를 찾아 그 위에 아래 코드를 복사 붙여넣기를 해준다.

<!-- SyntaxHighlighter Start -->

<script type="text/javascript" src="./images/shCore.js"></script>

<script type="text/javascript" src="./images/shAutoloader.js"></script>

<script type="text/javascript">

//<![CDATA[

SyntaxHighlighter.autoloader(

   'actionscript3 as3      ./images/shBrushAS3.js',

   'bash shell             ./images/shBrushBash.js',

   'cpp c                  ./images/shBrushCpp.js',

   'c# c-sharp csharp      ./images/shBrushCSharp.js',

   'css                    ./images/shBrushCss.js',

   'diff patch pas         ./images/shBrushDiff.js',

   'java                   ./images/shBrushJava.js',

   'jfx javafx             ./images/shBrushJavaFX.js',

   'js jscript javascript  ./images/shBrushJScript.js',

   'php                    ./images/shBrushPhp.js',

   'text plain             ./images/shBrushPlain.js',

   'py python              ./images/shBrushPython.js',

   'sql                    ./images/shBrushSql.js',

   'xml xhtml xslt html    ./images/shBrushXml.js' );

   // SyntaxHighlighter.config.bloggerMode = true;

   // SyntaxHighlighter.config.stripBrs = true;

   // SyntaxHighlighter.defaults['html-script'] = True;

   SyntaxHighlighter.all();

//]]>

</script>

<!--  SyntaxHighlighter End -->

여기까지 하면 사용하기 위한 준비는 완성..

6. 글쓰기를 누르고 HTML 체크하여 HTML편집상태로 만든 뒤

<pre class="brush:원하는 언어">

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

코드가 들어가는 부분(pre 사이에 넣어주면 된다.)

</pre>

7.  아래의 Brush aliases로 원하는 편집이 가능하다.

ex) C인 경우

<pre class="brush: c">

#include <stdio.h>

int main()

{

printf("Hello World");

return 0;

}

</pre>