티스토리 블로그에 SyntaxHighlighter 적용

2013-10-06 by 편리

다른 분들의 블로그를 가끔 방문할 때면 코드가 예쁘게(?) 나오는 걸 볼 때가 있다. ‘나도 저런 거 하고 싶다’ 라는 생각을 했는데.. 그런 기능이 티스토리 블로그에도 적용이 가능하다는 걸을 알고 피곤한 몸뚱이를 이끌고 작업을 시작.. 근 1시간 가량 소비가 된 것 같다. 크롬과 파이어폭스 그리고 IE에서 가능하면 같은 모습으로 보여지길 원해서 잘 하지도 못하는 정규식 붙들고 사투를 벌이다 보니 만족할만한 결과물이 나온 것 같다.

참고글 : http://sekainonaka.tistory.com/173

작업에 필요한 파일은 http://alexgorbatchev.com/SyntaxHighlighter/download/ 에서 다운로드 했다. 다운로드 한 파일의 압축을 풀어보면 scripts 라는 폴더와 styles 폴더가 있다. 이 두 폴더의 파일을 티스토리 관리자모드에서 업로드 해준다. 그런 다음 아래의 코드를 스킨편집에서 <title></title> 아래에 추가해준다.

<!-- SyntaxHighlighter 추가 코드 시작 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shAutoloader.js"></script>
<script type="text/javascript" src="./images/shBrushAppleScript.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushColdFusion.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushErlang.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJavaFX.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPerl.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPowerShell.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushSass.js"></script>
<script type="text/javascript" src="./images/shBrushScala.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushVb.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css"/>
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css"/>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
    var sh_Pattern = /brushs*:/gi;

    jQuery("blockquote").each( function() {
        if (jQuery(this).attr('class').search(sh_Pattern) > -1) // class brush 체크
        {
            var temp = jQuery(this).html(); //  내용 복사
            temp = temp.replace(/n/gi, "");
            temp = temp.replace(/r/gi, "");
            temp = temp.replace(/<P><BRs?/?></P>/gi, "n");
            temp = temp.replace(/<BRs?/?>/gi, "n");
            temp = temp.replace(/<P>/gi, "");
            temp = temp.replace(/</P>/gi, "n");
            temp = temp.replace(/(&nbsp;){2}/gi, "t");
            temp = '<pre class="'+ jQuery(this).attr('class') + '">'+temp+'</pre>';
            //temp = '<script type="syntaxhighlighter" class="'+ jQuery(this).attr('class') + '"><![CDATA['+temp+']]></script>'
            jQuery(this).after(temp);   // 뒤에 새 작성된 pre 또는 script태그로 붙인다.
            jQuery(this).remove();      //  기존의 인용태그 삭제
        }
    });

    /* SyntaxHighlighter 부분 */
    SyntaxHighlighter.defaults['toolbar'] = false;    // 툴바 안 보기
    SyntaxHighlighter.all();
});
</script>
<!-- SyntaxHighlighter 추가 코드 끝 -->

코드를 추가했으면 스킨 파일을 저장한다. 그런 다음 포스트를 작성할 때 “인용구” 기능을 이용해서 코드를 추가해 주면 된다. 인용구는 글쓰기 에디터 화면의 상단에 쌍따옴표(단축키는 Ctrl + Q) 를 클릭해서 blockquote 태그를 추가 한다. 에디터 오른쪽 상단의 HTML 체크박스를 클릭해 html 모드로 접속 후 blockquote 태그를 찾아 class에 brush:php 와 같이 입력해주면 된다. http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 페이지를 참고해 해당되는 언어를 brush:html 과 같이 지정해 주면된다.

이제 포스트에 코드를 넣을 때 좀 더 에쁘게 보여줄 수 있게 돼서 좋다. ^________^

22:48추가 => <blockquote class=”brush:html tx-quote-tistory”> 와 같은 순서로 class를 추가해줘야 하는군요. brush가 처음에 오지 않으면 적용이 안되는 듯 한데.. 이것도 수정을 해보고 싶지만.. 그러면 왠지 일이 너무 커질 듯..

00:07추가 => 심각한 오류가 있어 다시 코드 수정.. brush 클래스를 체크하는 부분에 오류가 있어 test() 대신 search() 사용.

Leave a Reply Cancel reply