Tistory에서 SyntaxHighlighter 사용하기

<참고한 블로그>

http://gyuha.tistory.com/405

http://techbook.tistory.com/entry/tistory-highlight

http://un-i.tistory.com/40

http://deepblue28.tistory.com/33

<SyntaxHighlighter 홈페이지>

http://alexgorbatchev.com/SyntaxHighlighter/

* 스킨 편집할 때마다 초기화 될 테니 설정 방법을 잘 정리해 놔야 겠다.

위에 포스팅 된 내용과는 다르게 pre 태그에서 무한 br 문제가 없었고, 인용구(blockquote 태그)를 쓰면 두 줄 띄울 때마다 P 태그가 붙고, 저장해서 보면 P 태그가 그대로 보인다. 엔터 칠 때마다 <BR> 태그가 생긴다.

☞ 그래서 아래 코드를 추가해서 P 태그 문제는 없앴지만 글을 수정하려고 하면 html 보기를 하면 원본 코드가 &nbsp; &lt; &gt; 이렇게 바뀌어 버려서 불만이다. 

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

☞ 약간 더 부가설명을 하자면 위 세 줄은 환경 설정 > 기타 설정 > 글쓰기 환경 > 엔터키 설정 > <p>문단 바꿈 (Shift+Enter시 줄 바꿈) 을 선택했을 때 필요한 코드이다. <br>줄 바꿈을 선택한다면

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

위 코드로도 충분하다.

☞ 인용구를 썼을 때 html 보기로 하지 않으면 원본 그대로 보이므로 이것도 괜찮은 선택인 것 같다. 특히 모바일 웹에서는 스킨 편집 시 코딩해줬던 자바스크립트를 사용하지 못하므로 - 모바일 웹 스킨은 직접 편집하지 못하므로 - 내용 중에 < 가 있고 </script> 가 있으면 인용구를 써주는 것이 가장 좋다. 그래야 모바일 웹에서 Syntax Highlight 가 안 되더라도 내용은 제대로 보인다.

☞ 인용구를 쓰면 URL에 대해서 A 태그가 자동으로 생성되면서 텍스트 상에 보이므로 글을 수정해서 생성된 A태그를 지워줘야 하는 불편함이 있다.

☞ FireFox 브라우저와 IE, 크롬 브라우저와 줄바꿈에서 차이가 나는데, 그 차이를 없애주기 위해

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

위 코드를 써 주면 모든 브라우저에서 동일한 줄바꿈 된 Syntax Highlight 된 내용을 볼 수 있다.

☞ pre 태그를 쓰면 코드 내용 중에 < 가 나오면 &lt; 로 바꿔줘야 한다고 SyntaxHighlighter 홈페이지에는 쓰여 있다. 그래서 jQuery 스크립트로 pre 태그를 찾아서 내용 중에 < 를 "&lt;" 로 치환해주는 코드를 써 주어야 한다. (아래 쪽에 코드가 있음) 그런데 수정 시에는 '<' 문자부터 안 보이고 html 보기로 해야지 보인다. 어찌됐든 그냥 볼 때는 잘 보이기 때문에 < 를 &lt; 로 안 바꾸고 그냥 쓰고 있다. (이렇게 하는게 가장 편하고, 수정 시에도 html 보기를 선택하면 원본 코드가 그대로 유지되서 좋은 것 같다.)

script 태그를 쓰면 이런 불편함이 없는데, <![CDATA[  ]]> 블럭을 써 줘야 하고, 내용 중에 </script>가 있으면 태그가 일찍 종료된다는 단점이 있다.

그런데 SyntaxHighlighter 2 버전에서는 툴바에 view source가 있어서 새 창이 뜨면서 코드만 copy 할 수 있었는데, 3 버전에서는 툴바가 없어지고, 마우스로 선택해서 copy 하면 한 줄로 쭉 복사가 된다.

버전 3에서 개선된 점을 적은 블로그를 보았는데(http://un-i.tistory.com/40) 더블클릭하면 textarea로 대체되면서 편집도 되고, 여기서 Ctrl-C나 Context Menu에서 복사 메뉴를 선택하면 한 줄이 아니라 여러 줄로 복사가 된다. (더블클릭을 먼저 해야된다는 점에 주의하자)
[참고] http://alexgorbatchev.com/SyntaxHighlighter/whatsnew.html#copytoclipboard

http://un-i.tistory.com/40 에 보면 궁금했던 점도 설명을 해 놓았는데, 예를 들면 코드 감추기는 되는데, 펼쳤다가 다시 접기는 안된다거나 버전 3 에서 word wrap 이 안되고 좌우 스크롤바가 생겼는데, 워드 랩으로 바꿀려고 해봤는데 안된다거나 하는 설명은 참 유용했다.

표시하고자 하는 내용이 프로그래밍 랭귀지 소스 코드일 수도 있지만, 일반 텍스트 이거나 html, xml 일 수도 있다. 내용에 따라 class="brush: ~~~" 에 적어야 할 값이 궁금하다면 다음 URL을 참고하면 된다.
=> http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

SyntaxHighlighter를 적용하는 방법

1) HTML 보기에서 pre 태그 사용 <pre class="brush: js">~~~</pre> 를 써 준다.
2) HTML 보기에서 script 태그 사용
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
]]></script>
3) 티스토리 인용구를 사용해서 코드를 붙여넣고, HTML 보기에서
<BLOCKQUOTE class="brush: html"> ~~~ </BLOCKQUOTE>

어쨌든 설정하는 방법은...

홈페이지에서 다운로드 받은 syntaxhighlighter_3.0.83.zip 파일의 압축을 풀어서 관리자 화면 > 스킨 > HTML/CSS편집 > HTML/CSS편집 > 파일 업로드 에서 scripts 폴더와 styles 폴더의 모든 파일을 업로드 한다.  jquery-1.6.1.min.js 파일은 www.jquery.com 에서 다운로드 받아서 아래 zip 파일에 같이 압축해 놓았다.

syntaxhighlighter_3.0.83.zip

관리자 화면 > 스킨 > HTML/CSS편집 > HTML/CSS편집에서 <title> 밑에 아래 코드를 추가해 줍니다.

<!-- jQuery 삽입 -->
<SCRIPT type=text/javascript src="./images/jquery-1.6.1.min.js"></SCRIPT>
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> -->

<!-- SyntaxHighlighter 삽입 -->
<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/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 rel=stylesheet type=text/css href="./images/shCore.css">
<LINK rel=stylesheet type=text/css href="./images/shThemeDefault.css">

<SCRIPT type=text/javascript>
/* jQuery 부분  */
jQuery.noConflict();  // 다른 라이브러리와 충돌을 방지한다.
jQuery(document).ready(function(){  // 문서가 모두 읽힌 후에 다음을 실행
    jQuery("blockquote").each( function() {  //blokquote를 사용한 태그
        var class_attr = jQuery(this).attr('class');
        if (class_attr && class_attr.substr(0,5)=='brush')
        // 그중 클래스명이 brush로 시작하는 것을 찾아 적용
        {
            var temp = jQuery(this).html(); //  내용 복사
            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, "\n");
            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("pre").each( function() {  //pre를 사용한 태그
        var class_attr = jQuery(this).attr('class');
        if (class_attr && class_attr.substr(0,5)=='brush')
        // 그중 클래스명이 brush로 시작하는 것을 찾아 적용
        {
            var temp = jQuery(this).html(); //  내용 복사
            temp = temp.replace(/</g, "<");
            jQuery(this).html = temp;
        }
    });
 
    /*  SyntaxHighlighter 사용부분  */
    SyntaxHighlighter.defaults['toolbar'] = false; // 툴바 안 보기
    SyntaxHighlighter.all();
});
</SCRIPT>

<2012-09-05> 

가로 스크롤바가 생기는 것이 싫다면 3버전을 안 쓰고 2버전을 써야 한다.
2버전은 line wrapping 이 된다. 다운로드는 SyntaxHighlighter 홈페이지에서 받으면 된다.
Awesome code syntax highlighting made easy
http://blog.cartercole.com/2009/10/awesome-syntax-highlighting-made-easy.html
여기에 2버전의 사용법을 잘 설명해 놨다.
script 태그는 CDATA 섹션을 사용해야 하고, pre 태그는 html escaped character를 사용해야 한다.
코드를 escaped character로 바꿔주는 사이트가 있다.

Quick Escape
http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php

---

가로 스크롤바가 생기는 것이 싫고 line wrapping을 원한다면 jQuery Syntax Highlighter를 사용해 보는 것도 좋다.

jQuery Syntax Highlighter - Based on Google's Prettify

사용법은 아래 웹페이지에 잘 나와 있으니 참조하면 된다.

http://balupton.github.com/jquery-syntaxhighlighter/demo/

[2012-09-08]
스킨을 바꾸면서 jQuery Syntax Highlighter로 바꿔서 적용했음.

http://bryan7.tistory.com/14