시크한 공돌이의 IT 블로그

1. 목적

ㄱ. 티스토리에 소스코드 틀을 넣는 방법을 알아보자

2. 준비

ㄱ. 티스토리 계정

3. 본론

ㄱ. http://code.google.com/p/syntaxhighlighter/ 에서 SyntaxHighlighert_1.5.1.rar를 다운받음 

ㄴ. 다운받은 파일을 압축 해제시킴

ㄷ. 관리자 페이지 -> 스킨 -> HTML/CSS 편집 -> 파일 업로드 탭으로 이동

ㄹ. 압축을 푼 Styles\SyntaxHighlighter.css 파일 업로드

ㅁ. 압축을 푼 Scripts 폴더 안에 있는 모든 파일을 업로드

ㅂ. 관리자 페이지 -> 스킨 -> HTML/CSS 편집 -> HTML/CSS 편집 탭으로 이동

ㅇ. skin.html에 아래 소스 추가

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

ㅈ. skin.html 제일 하단에 아래 소스 추가

<!-- code for syntaxhighlight --> <script class="javascript" src="./images/shCore.js"></script> <script class="javascript" src="./images/shBrushCpp.js"></script> <script class="javascript" src="./images/shBrushCSharp.js"></script> <script class="javascript" src="./images/shBrushCss.js"></script> <script class="javascript" src="./images/shBrushDelphi.js"></script> <script class="javascript" src="./images/shBrushJava.js"></script> <script class="javascript" src="./images/shBrushJScript.js"></script> <script class="javascript" src="./images/shBrushPhp.js"></script> <script class="javascript" src="./images/shBrushPython.js"></script> <script class="javascript" src="./images/shBrushRuby.js"></script> <script class="javascript" src="./images/shBrushSql.js"></script> <script class="javascript" src="./images/shBrushVb.js"></script> <script class="javascript" src="./images/shBrushXml.js"></script> <script class="javascript"> dp.SyntaxHighlighter.ClipboardSwf = "./images/clipboard.swf"; dp.SyntaxHighlighter.HighlightAll('code'); </script> <!-- code for syntaxhighlighter -->

ㅊ. 스킨을 저장한다.

ㅋ. 사용방법은 아래와 같이 HTML 모드에 넣으면 된다.

<textarea name="code" class="클래스명"> 코드 소스 <textarea>

ㅌ. 클래스 명은 다음과 같다.