SyntaxHighlighter 티스토리 적용 시 abp버그 수정 및 업그레이드

전에 SyntaxHighlighter를 Tistory에 적용시키는 글을 포스팅한 적 있다.

 

[Programming/Web Language] - SyntaxHighlighter 티스토리에 적용하기

 

Tistory 글쓰기 기능 중 인용구를 이용하여 code:java 식으로 적기만 하면 바로 적용되는 간편한 방법이었다.

허나, 금일 갑자기 오류로 인하여 코드들이 개행 태그마다 abp라는 속성이 붙어서 한줄로 이상하게 출력되기 시작했다.

 

원 소스 출처인 테크북님 블로그도 같은 증상을 보인다. (http://techbook.tistory.com/entry/tistory-highlight)

 

 

 

왜 그런지 이유를 알아봤더니, 티스토리가 어떤 이유에서인지는 모르겠지만 내부에서 모든 태그에 abp라는 속성을 가지고 일련번호를 달고 있었다.

 

그래서 급히 이 문제를 해결함과 동시에, 위지윅 에디터에서 Tab키를 누르는 것도 코드에 반영되도록 코드를 수정하여 공개한다.

 

<!-- Syntax Highlighter 코드 시작 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/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/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>
<script type="text/javascript" src="./images/shBrushObjC.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 부분  */
jQuery.noConflict();  // 다른 라이브러리와 충돌을 방지한다.
jQuery(document).ready(function(){  // 문서가 모두 읽힌 후에 다음을 실행
    jQuery("blockquote").each( function() {  //blokquote가 사용한 태그
        if (jQuery(this).attr('class').substr(0,5)=='brush')
        // 그중 클래스명이 brush로 시작하는 것을 찾아 적용
        {
            jQuery(this).find('p,br').each( function () {
                jQuery(this).removeAttr('abp');
            });
            var temp = jQuery(this).html();

            temp = temp.replace(/\n/gi, "");
            temp = temp.replace(/<p style=\"margin-left: 2em;\">/gi, "\n "); //티스토리내의 Tab키를 지원한다
            temp = temp.replace(/<BR>/gi, "\n");
            temp = temp.replace(/<BR \/>/gi, "\n");
            temp = temp.replace(/<P>/gi, "\n");
            temp = temp.replace(/<\/P>/gi, "");
            //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();         //  기존의 인용태그 삭제
        }
 else if(jQuery(this).attr('class').substr(0,5)=='code:')
        // 그중 클래스명을 code:로 해도 되게끔
        {
            var length = jQuery(this).attr('class').length;
            jQuery(this).find('p,br').each( function () {
                jQuery(this).removeAttr('abp');
            });
            var temp = jQuery(this).html(); 
            temp = temp.replace(/\n/gi, "");
            temp = temp.replace(/<p style=\"margin-left: 2em;\">/gi, "\n ");
            temp = temp.replace(/<BR>/gi, "\n");
            temp = temp.replace(/<BR \/>/gi, "\n");
            temp = temp.replace(/<P>/gi, "\n");
            temp = temp.replace(/<\/P>/gi, "");
            temp = '<script type="syntaxhighlighter" class="brush:'+ jQuery(this).attr('class').substr(5, length) + '"><![CDATA['+temp+']]><\/script>';
            jQuery(this).after(temp);
            jQuery(this).remove();
        }
    });

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

 

30번째 라인은 Objective C를 지원하는 브러쉬로 원치 않는 사람은 라인을 빼면 된다.

 

만약 Objective C 도 지원하고 싶다면 아래 파일을 다운 받아 스킨 업로드하는 곳에 올리면 된다.

사용은 brush:objc 정도로 하면 된다.

 

 

shBrushObjC.js