tsyntax 사용시 hooker.js 스크립트 버그패치

소스 하이라이트와 관련하여 많이 사용되고 있는 것은, 자바스크립트로 된 SyntaxHighlighter 이다.

http://alexgorbatchev.com/SyntaxHighlighter/

이러저러 검색해보니 티스토리에 간단하게 붙여쓸 수 있게끔 작업된  Syntaxhighliter for Tistory Blog 라고 만들어진 것이 있어 설명된 방식대로 붙여보았다. 사용 방법은 정말 단순하다. 아래 태그를 </head> 태그 직전에 추가해준다.

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

그런 후 인용구를 추가하고 그 상태에서 다음과 같이 입력(위의 소스 하이라이트의 경우)하면 된다.

###html

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

### 이후 언어 지정은 Syntaxhighliter 를 참고하면 되겠다. 일단, 문제는 ### 를 지정하지 않은 일반 인용구인 경우~ 화면에 출력되지 않는다. 바로 tsyntax.js 에서 호출하는 hooker.js 에 오류가 있어 그렇다. 해당 소스를 다음과 같이 고치면 된다.

###js
(function(){

if (!shSetup.jQuery) jQuery.noConflict();

jQuery(document).ready(function(){
    jQuery("blockquote").each( function() {
        var temp = jQuery(this).html();
        var starter = "###";
        if (temp.substring(0, starter.length) == starter) {
            temp = temp.replace(/\n/gi, "");
            temp = temp.replace(/<BR>/gi, "\n");
            temp = temp.replace(/<BR \/>/gi, "\n");
            temp = temp.split("\n");
            var fl = temp[0].replace(starter,"brush: ");
            temp.shift();
            temp = temp.join("\n");
            temp = '<pre class="'+ fl + '">'+temp+'</pre>'
            jQuery(this).replaceWith(temp);
        }
    });
    SyntaxHighlighter.all();
});

})();

고친 부분은 9행 쪽의 temp.substring 이다 원본 소스는 starter.substring 으로 되어있다. 이 경우 무조건 true 이므로 인용구 태그를 모두 치환해버린다. 아주 사소한 실수인데... 아마도 관련 버그를 수정한 후 소스서버에 커밋하지 않은 것 같다. 직접 업로드하여 사용하고 있다면 hooker.js 를 상기와 같이 고친 후 업로드하면 되겠다.(아무래도 블로그 로딩 속도도 있고 별도 업로드하여 쓰는게 여러모로 좋다.^^)