티스토리 블로그에 프로그래밍 코드 깔끔하게 넣기.

 개발관련 블로그를 쓰다보면 간간하게 소스코드를 넣어서 쓸때가 있는데, 이때마다 어떻게 넣어야 소스코드가 깔금하게 나올까 고민을 하게 된다. 난 C#개발자라 주로 Visual Studio를 사용하는데, 여기서 소스코드를 짜서 블로그에 그냥 블로그에 붙어 넣으면 너무 없어 보인다. 그래서 난 조금 머리를 써서 테이블 태그를 이용해서 테두리를 만들고 그 안게 소스코드를 넣는 형태로 블로그를 썼었다. 그런데...내 생각보다 더 편한, 그리고 더 이뿐(?!) 방법이 있지 않는가!! 이는 아래와 같다.

/// <summary> /// 어플리케이션의 기본정보및 필요정보를 설정/반환합니다. /// </summary> public class ApplicationInfo { /// <summary> /// 생성자 /// </summary> public ApplicationInfo() { } }

위와 같이 깔끔한 소스코드를 정리할 수 있는 SyntaxHighligher를 소개하려 한다. 티스토리 설정 방법은 아래와 같다.

1. 먼저 SyntaxHighligher 소스를 다운로드 받는다.
http://code.google.com/p/syntaxhighlighter/

2. 다운로드 받은 파일을 압축을 해지한 후에 티스토리 어드민 로그인을 해서 상위 메뉴에서 스킨 > HTML& CSS 편집 으로 들어간다.

3. HTML/CSS 편집 탭 옆에 있는 파일 업로드 탭을 클릭한다. 그리고 압축하고 나왔던 파일중 일부를 업로드 한다. 업로드해야할 파일은 아래와 같다.

3-1. Styles파일을 업로드 한다. (SyntaxHighlighter.css 파일)

3-2. Scripts 폴더에 있는 파일 전부.

4. HTML&CSS 편집 탭으로 이동해서 skin.html파일 부분에 스타일 파일을 링크 시킨다.

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

5. skin.html파일에 스크롤 따라 제일 밑으로 내려와서 마지막 부분에 아래와 같이 스크립트 연결시킨다.

<script class="javascript" src="./images/shCore.js"></script> <script class="javascript" src="./images/shBrushCpp.js"></script> <script class="javascript" src="./images/shBrushCss.js"></script> <script class="javascript" src="./images/shBrushJScript.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" src="./images/shBrushCSharp.js"></script> <script class="javascript" src="./images/shBrushJava.js"></script> <script class="javascript"> dp.SyntaxHighlighter.ClipboardSwf = './images/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script>

6. 4번과 5번 같이 다 작성했다면 저장을 하자. 그리고 글쓰기를 해서 확인해 보자!!

7. 코드 넣는 방법은 textarea태그를 이용하면 된다. HTML편집 모드로 이동한후에 아래와 같이 테스트를 해보라.

<textarea name="code" class="c#">      /// <summary>     /// 어플리케이션의 기본정보및 필요정보를 설정/반환합니다.     /// </summary>     public class ApplicationInfo     {         /// <summary>         /// 생성자         /// </summary>         public ApplicationInfo()         {         }     } </textarea>

그리고 저장한 후 확인해 보면 위 같이 깔끔하게 나올 것이다. (name은 code형태라고 알려 주는 것이고, 해당 텍스트 내용이 c#코드 입을 알려 주는 것이다.) class 지정은 코드 형태에 따라 달라 질 수 있는데, 그 내용은 아래 표를 확인 하면 도움이 될 것이다.

언어	class code
C++	cpp, c, c++
C#	c#, c-sharp, csharp
CSS	css
Delphi	delphi, pascal
Java	java
Java Script	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