티스토리에 소스코드넣기

카테고리 없음

티스토리에 소스코드넣기

행복한 수지아빠 2010. 11. 7. 18:57

출처 :

http://planmaster.tistory.com/394

티스토리는 설치형 블로그가 아니기 때문에 [CODE][/CODE] 태그를 먹지 않는다.
블로그를 포스팅하게 되면서 소스 코드를 올리게 되는데 그냥 글로 올려 버릴려고 하니 보기에도 안 좋고 볼때마다 짜증이 장난이 아니다.

그래서 결국은 티스토리에서 소스코드를 넣는 방법을 찾아내었다.
혹시라도 필요할지 몰라서 적어 놓으니 필요하신 분들께서는 참고하시면 되겠슴다.

티스토리에 소스코드를 보여주기 위해서는 SyntaxHighlighter 2.0.287 가 필요하다.
결국 말하자면 이넘을 활용해서 소스코드를 구문에 맞게 변경해서 보여준다는 것이다.
다운은 http://bit.ly/bSmu2N 에서 받을 수 있다.

다운을 받았다면 압축을 해제해서 scripts 폴더와 style 폴더에 있는 소스를 모두 티스토리에 업로드 한다.

업로드 방법은 다음과 같습니다.

자신의 블로그에 관리자계정으로 로그인을 한다.
로그인을 해서 메뉴에서 ‘스킨 >> HTML/CSS 편집’ 을 선택한다.
파일 업로드 탭을 선택한 후에 ‘파일업로드’버튼을 활용해서 위에서 설명한 파일들을 모두 업로드 한다.

모두 업로드가 되었다면 ‘HTML/CSS 편집’ 탭을 선택해서 <head></head> 태그 사이에 다음 소스를 넣도록 한다.

view source
print?

<script src="./images/shCore.js" type="text/javascript"></script>
<script src="./images/shBrushBash.js" type="text/javascript"></script>
<script src="./images/shBrushCpp.js" type="text/javascript"></script>
<script src="./images/shBrushCSharp.js" type="text/javascript"></script>
<script src="./images/shBrushCss.js" type="text/javascript"></script>
<script src="./images/shBrushDelphi.js" type="text/javascript"></script>
<script src="./images/shBrushDiff.js" type="text/javascript"></script>
<script src="./images/shBrushGroovy.js" type="text/javascript"></script>
<script src="./images/shBrushJava.js" type="text/javascript"></script>
<script src="./images/shBrushJScript.js" type="text/javascript"></script>
<script src="./images/shBrushPhp.js" type="text/javascript"></script>
<script src="./images/shBrushPlain.js" type="text/javascript"></script>
<script src="./images/shBrushPython.js" type="text/javascript"></script>
<script src="./images/shBrushRuby.js" type="text/javascript"></script>
<script src="./images/shBrushScala.js" type="text/javascript"></script>
<script src="./images/shBrushSql.js" type="text/javascript"></script>
<script src="./images/shBrushVb.js" type="text/javascript"></script>
<script src="./images/shBrushXml.js" type="text/javascript"></script>
<link href="./images/shCore.css" type="text/css" rel="stylesheet"><link href="./images/shThemeDefault.css" type="text/css"rel="stylesheet">
<script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf'; SyntaxHighlighter.all();</script>

이렇게 하면 셋팅은 모두 끝났다.
사용하는 방법은 글쓰기로 들어가서 모드를 HTML로 변경을 해서 다음의 태그를 삽입하면 이쁜 소스의 모습을 볼 수 있다.
<pre class="brush: java">
// 여기에 코드를 삽입한다.
</pre>
아래는 각 언어별 명칭을 나타낸 표이다. “brush: 명칭”을 쓰면 각 언어별로 표현가능하다.

미아를 찾습니다