TISTORY 에서 SyntaxHighlighter 사용하기.

블로그 특성상 소스 코드를 자주 올리게 되는데, 보기 좋게 올리기 위해 
SyntaxHighlighter 를 사용하기로 했다.

1. SyntaxHighlighter 다운 받기.
    http://alexgorbatchev.com/SyntaxHighlighter/ 에서 다운 받는다.
    포스팅 당시 최신 버전은 3.0.83 이었다.
    다운로드 받아 압축을 풀면 아래와 같이 있는데, 
    필요한 파일은 styles, scripts 디렉토리에 있는 것들이다.

2. 필요한 파일을 UPLOAD.
   TISTORY 관리자 페이지에 로긴해서, [ 스킨 ] / [ HTML/CSS편집 ] / [ 파일 업로드 ] 화면에서
   필요한 파일을 모두 올린다. 
   필요한 파일은 압축푼 파일 중에 styles, scripts 디렉토리 밑에 있는 모든 파일이다.

   올려진 파일을들 보면, images 디렉토리 밑으로 올라간 것을 알 수 있다.

3. TISTORY 스킨 파일 편집.
   [ 스킨 ] / [ HTML/CSS편집 ] / [ HTML/CSS 편집 ] 화면에서 skin.html 파일에 내용을 편집한다.
   

    밑줄에 아래의 내용을 추가한다.

  
   위 내용 처럼 압축을 풀었을때 경로가 아닌, 파일이 올라간 images로 경로를 바꾸어야 한다.

   두번째 "shThemeEmacs.css" 파일은 보여줄 테마를 지정한 것이다.
   테마 css 파일을 이것저것 지정해보고 마음에 드는 것으로 결정하면 된다.
   (사실 맘에 쏙 드는 것이 없었는데. Emacs 테마가 가장 나은 것 같다.)

   동일한 방법으로 skin.html 파일 가장 하단 </body> 위쪽에 아래와 내용을 넣어 준다.

     여기서 필요한 코드는 맨 밑줄 함수 실행부 이고, 그외 설정 부분이다.
     stripBrs를 true로 설정하면, TISTORY 에서 자동으로 <br> 태그를 붙이는 걸 무시 할 수 있다.

   4. TISTORY에서 글쓰기.
     글을 쓸때에는 소스 코드가 들어갈때는 html 모드에서 글을 써야한다.

   위와 같이 html 체크박스를 체크하면, html 모드에서 글을 입력할 수 있다.
   소스 코드를 넣을때 아래와 같은 문법으로 넣는다.

<pre class="brush: sql">
CREATE TABLE CVS_COMMIT
(
   SEQ              NUMBER(10) NOT NULL,
   USERID           VARCHAR2(20) NOT NULL,
   REG_DATE         DATE DEFAULT SYSDATE,
   PROJECT          VARCHAR2(50) NOT NULL,
   FILENAME         VARCHAR2(500) NOT NULL
);
</pre>

    
  소스의 내용은 <pre></pre> 태그 사이에 넣어주고, class의 brush 속성에 원하는 문법을 지정한다.
  지정 가능한 문법은 아래와 같다. 

ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

첫번째 컬럼이 문법, 두번째 컬럼이 brush에 지정할 속성 상수, 
세번째 컬럼이 필요한 Javascript 파일로써 TISTORY에 UPLOAD되어 있어야 한다.

문법 뿐 아니라 추가 속성을 지정할 수 있는데, 아래와 같이 ";" (세미콜론) 로 구분한다.

<pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">...</pre>

지정 할 수 있는 속성 목록은 아래와 같다.

속성	기본값	설명
auto-links	true	URL을 클릭하면 페이지 이동이 가능하도록 하이퍼링크를 자동으로 걸어준다.
class-name	''	그외 사용자 지정 class를 추가하고 싶을때 사용한다.
collapse	false	"펼치기" 기능을 사용하고 싶을 때 (티스토리의 "더보기" 기능이 더 나은것 같다)
first-line	1	시작 Line Number를 지정한다.
gutter	true	Line Number를 켜고 끌수 있다.
highlight	null	강조할 라인을 배열로 넘긴다. (예 : "brush: plain; highlight: [1, 3]")
html-script	false	php, asp, jsp 등과 같이 소스 코드안에 html이 포함되는 경우 html도 하이라이팅하고 싶으면 사용한다
smart-tabs	true	스마트탭 기능의 활성화 여부를 지정한다 (무슨 기능인지 잘 모르겠다)
tab-size	4	TAB 크기를 지정한다.
toolbar	true	툴바를 켜거나 끌 수 있다.

이제 TISTORY에서 깔끔한 코드를 볼 수 있다.

<주의 사항>
-. SyntaxHighlighter 3.0.83 버전에 버그가 하나 있다.
   일부 코드에 대해 Line Number가 어긋나 보이는 경우가 있다.
   한 Line 에 긴 코드가 포함된 경우 wrapped(자동줄바꿈) 처리를 하면서 잘못 처리하는 것 같다.
   소스 코드를 무조건 올리지 말고, 적당히 줄바꿈 처리를 해주고 올리는 것이 좋다. 
-. html모드에서 <pre></pre> 태그를 사용할 경우 소스 코드에 포함된 "<", ">"의 파싱을 잘못하는
   경우가 발생하는 것 같다. 
   소스 코드를 올리기 전에 "<"를 "&lt;"로, ">"를 "&gt;"로 변환 해서 올리는 것이 좋다. 

syntaxhighlighter_3.0.83.zip