티스토리 블로그에 프로그래밍 코드 깔끔하게 넣기.
Utility / 2011. 10. 7. 16:27
개발관련 블로그를 쓰다보면 간간하게 소스코드를 넣어서 쓸때가 있는데, 이때마다 어떻게 넣어야 소스코드가 깔금하게 나올까 고민을 하게 된다. 난 C#개발자라 주로 Visual Studio를 사용하는데, 여기서 소스코드를 짜서 블로그에 그냥 블로그에 붙어 넣으면 너무 없어 보인다. 그래서 난 조금 머리를 써서 테이블 태그를 이용해서 테두리를 만들고 그 안게 소스코드를 넣는 형태로 블로그를 썼었다. 그런데...내 생각보다 더 편한, 그리고 더 이뿐(?!) 방법이 있지 않는가!! 이는 아래와 같다.
위와 같이 깔끔한 소스코드를 정리할 수 있는 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"> |
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 |