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

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

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

• http://alexgorbatchev.com/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 name	Brush aliases	File 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

참고 사이트

• http://techbook.tistory.com/entry/tistory-highlight : jQuery 부분은 여기의 내용을 참고 했습니다. 감사합니다. 

이 포스팅에 사용된 버전

syntaxhighlighter_3.0.83.zip

추가로 그냥.. br을 빼는 옵션이 있어서 jquery를 빼고
SyntaxHighlighter.config.stripBrs = true;
이 줄 만 추가해 주시고,이전 버전 처럼 사용 하셔도 별 상관은 없습니다.
하지만, html편집모드로 왔다갔다 할 때, 스페이스가 들어가는 문제가 있습니다.
그리고, SyntaxHightlighter의 버그인지.. ie에서는 한줄로 표시가 되네요 -_-;;

그리고 ie에서 html 편집모드로 왔다갔다 하시면, blockquote 태그가 대문자로 바뀌는 경우가 있습니다.
SyntaxHighlighter를 사용하실때는 파이어폭스나 크롬을 사용해 주세요.

저작자표시