블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday





 개발관련 블로그를 쓰다보면 간간하게 소스코드를 넣어서 쓸때가 있는데, 이때마다 어떻게 넣어야 소스코드가 깔금하게 나올까 고민을 하게 된다. 난 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">
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 

Posted by happydong
, |