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>
ㅌ. 클래스 명은 다음과 같다.
언어 | 클래스명 |
C++ | cpp, c, c++ |
C# | c#, c-sharp, csharp |
CSS | css |
Delphi | delphi, pascal |
JavaScript | js, jscript, javascript |
PHP | php |
Python | py, python |
Ruby | rb, ruby, rails, ror |
Sql | sql |
VB | vb, vb.net |
XML/HTML | xml, html, xhtml, xslt |