본문 바로가기
Programming

SyntaxHighlighter 3.X를 tistory에 적용하기.

by 신규하 2010. 12. 13.

이전 버전을 계속 포스팅 했었는데, br태그가 이상하게 나온다거나.. tistory에서 사용 할 때 불편한 문제점들이 이것저것 있는데.. 아래 처럼 사용하면 좀 더 편하게 사용 할 수 있습니다.

먼저 최신 버전의 SyntaxHighlighter을 다운로드 받습니다.

압축을 풀면 아래와 같이 보입니다.
여기서 scripts와 styles 폴더의 내용을 모두,
관리자 화면 > 스킨 > HTML/CSS편집 > 파일 업로드에서 파일 업로드를 통해서 올려 줍니다.

추가 된 것을 확인 하시면,
관리자 화면 > 스킨 > HTML/CSS편집 > HTML/CSS편집에서 <title> 밑에 아래 코드를 추가해 줍니다.

<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>
<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로 시작하는 것을 찾아 적용
        {
            var temp = jQuery(this).html(); //  내용 복사
            temp = temp.replace(/\n/gi, "");
            temp = temp.replace(/<BR>/gi, "\n");
            temp = temp.replace(/<BR \/>/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();         //  기존의 인용태그 삭제
        }
    });

    /* SyntaxHighlighter 부분 */
    SyntaxHighlighter.defaults['toolbar'] = false;    // 툴바 안 보기
    SyntaxHighlighter.all();
});
</script>



jQuery는 구글의 apis에서 가져다 오도록 했습니다. 현재 최신 버전이 1.4.4입니다.
그리고, 41번과 42번 줄에 보시면, pre태그와 script태그를 둘중 하나를 선택해서 사용 하시면 되는데..
여기를 참고 하시고 선택해서 사용하세요.
저 같은 경우에는 script 태그를 선택 했습니다.
그리고 사용하는 방법은 매우 간단해 졌습니다.

텍스트 모드에서 붙여 넣기를 한 후,
인용구<Ctrl+Q>를 선택 하시면 됩니다.

그리고 HTML 편집 모드로 들어 가셔서 blockquote를 찾으셔서, 태그에 적당한 brush를 넣어 주시면, 코드가 깔끔하게 들어 갑니다.

<blockquote class="brush:html">
...
</blockquote>
그리고, 줄에 하일라이트를 넣고 싶거나, 상세 설정은
  • http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
이 페이지를 참고 하시면 됩니다.


지원 문법

Brush nameBrush aliasesFile name
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
ColdFusion cf, coldfusion shBrushColdFusion.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Erlang erl, erlang shBrushErlang.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js


참고 사이트

이 포스팅에 사용된 버전



댓글