티스토리 블로그 구문강조(syntaxhighlighter) 간편하게 사용하기

그동안 구문 강조를 블로그에 적용하기 위해서 많은 노력을 했는데 번번히 마지막에서 실패를 했습니다. 파일을 다운 받아서 스킨에 추가를 하고 코드도 편집하고 많은 시간과 노력이 필요했습니다. 소스 코드는 한줄 추가로 간편하게 구문 강조를 할 수 있는 방법을 소개 하려고 합니다. 

 http://choboyam.tistory.com/entry/tsyntax 기본적인 설정은 요기서 확인이 가능합니다. 

간단하게 요약을 하면 관리자 화면에서 skin.html에 </head> 아래 부분에 아래 코드를 추가합니다.

<script type="text/javascript"  src="http://tsyntax.googlecode.com/hg/release/tsyntax.js"></script> 

사용법은 글 작성시 "인용구" 버튼을 누르고 "### c" 와 같은 최상단에 쓰고 소스코드를 추가하면 됩니다. 참 쉽죠.

그런데 큰 문제가 하나 있었습니다. 이렇게 소스 코드를 추가면 구문강조는 되지만 모양이 이상하게 출력이 됩니다. 해결 방법을 몰라서 저도 지금 까지는  Ultraedit 를 이용해서 소스 코드를 올렸습니다.  아주 간편하게 예쁘게 출력 되는 방법이 있습니다. 

<pre class="brush:[언어];">

[소스코드]

</pre>

형태로 작성을 하면 됩니다. 물론 티스토리 글 작성시 편집기 우측 상단에 HTML을 누르고 HTML 편집 상태에서 입력해야겠죠.

예시)

<pre class="brush: c;">

#include <stdio.h>

int main()

{

printf("된다...\n");

return  0;

}

</pre>

출력 결과 

#include 

int main()

{

printf("된다...\n");

return  0;

}

그래도 아직 소스 중간 삽입을 할경우 불안하다.HTML 수정이 필요하다. 

 그리고 하나 더 중요한 사실 위의 스크림트를  블로그에 추가하면 로딩 속도가 눈에 띄게 느려집니다. 그래서 저는 삭제 했습니다.