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

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

 

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

 

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

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

 

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

 

 

 

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

 

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

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80

<!-- 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