Syntax Highlighter를 상당히 편하게 해주는 jQuery Script

Syntax Highlighter를 설치한 뒤(이는 생략한다),

HEAD부분에 다음과 같은 부분을 추가하자(출처 : http://bryan7.tistory.com/14, 다만,.. 많이 고쳤네요).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<script type=text/javascript>

/* Removal of Incorrect Closing Tags */

jQuery.noConflict();

jQuery(document).ready(function(){ // Activated when the page is loaded and ready.

    jQuery("blockquote").each( function() {  //blokquote를 사용한 태그

        var class_attr = jQuery(this).attr('class');

        if (class_attr && class_attr.substr(0,5)=='brush')

        // 그중 클래스명이 brush로 시작하는 것을 찾아 적용

        {

            jQuery(this).find('span').remove();

            var temp = jQuery(this).html(); //  내용 복사

            temp = temp.replace(/&nbsp;/g, "");

            temp = temp.replace(/\n/gi, "");

            temp = temp.replace(/<br \/>/gi, "\n");

            /* 다음 세 줄은 환경 설정 > 기타 설정 > 글쓰기 환경 > 엔터키 설정 > 

           <p>문단 바꿈 (Shift+Enter시 줄 바꿈) 을 선택했을 때 필요한 코드이다. */

            temp = temp.replace(/<BR>/gi, "\n");

            temp = temp.replace(/<P>/gi, "");

            temp = temp.replace(/<\/P>/gi, "\n");

            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(); //  기존의 인용태그 삭제

        }

    });

   jQuery("cpp").each( function() {

      var temp = jQuery(this).html(); //  내용 복사

      temp = temp.replace(/</g, "&lt;");

      temp = temp.replace(/>/g, "&gt;");

      temp = temp.replace(/&lt;\/\S+&gt;$/g, "");

      temp = '<pre class="brush: cpp;">'+temp+'</pre>'

      jQuery(this).after(temp);

      jQuery(this).remove();

   });

   SyntaxHighlighter.defaults['toolbar'] = false; // 툴바 안 보기

   SyntaxHighlighter.all();

});

이제 글을 작성할 때에

위의 쌍따옴표 모양 인용구 버튼을 누르고

그 안에 코드를 적은 다음,

HTML모드에서 class를 "brush: cpp;"와 같은식으로 바꿔주면 적용된다.

2013. 07. 11 수정 ─ CPP 코드는 HTML 모드에서 <cpp>코드</cpp>로 직접 넣으면 됩니다 ㅎㅎ

2013. 07. 16 수정 ─ 다만 이렇게 할땐 < 쓸때는 꼭 띄어쓰기가 있어야 정상동작하네요..

안그럼 티스토리 글 에디터 자체에서 태그로 인식해서 코드를 망쳐요

e.g.

i <v[x].size(); --> 망함

i<v[x].size(); --> 망함

i< v[x].size(); --> 괜찮음

i < v[x].size(); --> 괜찮음