티스토리 뷰


이전 버전을 계속 포스팅 했었는데, 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


참고 사이트

이 포스팅에 사용된 버전


더보기


댓글
  • 프로필사진 passionate 덕분에 잘 설치했습니다. 감사합니다.
    그런데, 버전이 올라가면서 스크롤바가 자동적으로 생긴 것인가요? ^^a
    2010.12.14 04:13 신고
  • 프로필사진 신규하 혹시.. 크롬을 쓰시나요?
    크롬에서는 상하 스크롤바가.. 생기더라구요.. ^^;
    2010.12.14 08:54 신고
  • 프로필사진 passionate 네.. IE로 보니 상하 스크롤바는 없어지네요^^
    좌우 스크롤바는 어쩔 수가 없나보군요..
    2010.12.15 20:30 신고
  • 프로필사진 myskan 안녕하세요? 좋은 내용의 포스팅 감사 드립니다.
    저는 위의 방법 진행하여도 적용이 되지 않는데 어떻게 원인을 찾아야 할지 모르겠습니다.

    1. 알려주신 코드를 복사하여 <title> :: </title> 밑에 붙여 놓았고.
    2. 혹시 파일이 업로드 되지 않았나 싶어서거 알려주신 코드에서 사용된 jss 및 css 화일이 제대로 업로드 되었는지도 직접 확인도 하였습니다.
    3. 현재 작업한 브라우저는 크롬입니다.

    혹시 여유가 되시어 함께 고민해 주시면 감사드리겠습니다.
    (만약 함께 고민해 주신다면 어떤 정보를 더 알려 드려야 하나요??)
    2011.02.08 01:52 신고
  • 프로필사진 신규하 흠.. 코드에서는 별 이상이 없어 보이네요 ^^;;
    쓰실때
    <pre class="bursh:html">
    ...
    </pre>
    이런식으로 테스트를 한번 해 보세요..
    혹시 jquery 부분이 잘 동작하지 않을 수도 있을꺼 같아서..

    잘 되었으면 좋겠네요.
    감사합니다.
    2011.02.09 17:00 신고
  • 프로필사진 츄도크 본 포스팅에는 나와 있지 않지만 공식 홈페이지에 가면 </body> 태그 위에 <script type="text/javascript">
    SyntaxHighlighter.all()
    </script> 이 부분이 들어가야 합니다.
    2011.03.07 10:28 신고
  • 프로필사진 신규하 여기서는 자바스크립트에서 jquery를 사용하고 있습니다.
    jQuery(document).ready(function(){}
    여기서 이 함수 안에
    SyntaxHighlighter.all()
    를 넣어 주면, 페이지의 렌더링이 끝난 후에 실행이 되게 됩니다.
    덕분에 /body 위에 넣지 않아도 괜찮습니다.
    안심하고 사용하세요.

    좋은 지적, 감사합니다.
    2011.03.07 18:40 신고
  • 프로필사진 츄도크 그렇군요.. 저도 위의 JQuery관련 함수를 모두 입력하고 SyntaxHighlighter.all() 도 모두 호출했는데
    적용이 되지 않더라구요. 그래서 방법을 찾다가 /body 태그위에서 호출하니까 되더라구요^^ 크롬을 사용하고 있습니다.^^
    2011.03.12 02:04 신고
  • 프로필사진 신규하 흠.. /body위에 올리는 방법도 맞기는 한데.. 그건 로딩의 제일 끝에다 넣어서 파싱하다가.. 실행하는 방법이라서..
    개인적인 의견으로는 jqeury에서의 jQuery(document).ready(function(){}안에 넣고.. 페이지 렌더링이 끝난 후에 실행 하도록 하는데.. 맞다고 생각합니다.
    그런데, 잘 되질 않으신다고 하니.. ㅜ.ㅜ
    뭐라 드릴 말씀이 없네요.
    참고로 전 파폭과 크롬을 둘다 사용하고 있습니다.
    어쩌다 보니.. 용도별로 사용하게 되었네요 ^^;
    2011.03.13 12:56 신고
  • 프로필사진 밤벌레 안녕하세요 신텍스하이라이트 관련글을 검색하다가 트랙백달고 갑니다.^^
    전 3.0.83버전을 다운받아 블로그에 적용시켜보았는데 나오질 안더군요..
    그래서 구 버전 2.1.382버전을 사용하는데 IE에서는 C언어 코드가 대문자로 보이고 크롬에선 소문자로 보이더군요..
    혹시 3.0.83 버전이 2.1.382 버전에서 바뀐게 뭐가 있는 지 궁금하군요..
    2011.03.20 06:42 신고
  • 프로필사진 신규하 http://alexgorbatchev.com/SyntaxHighlighter/whatsnew.html
    변경 사항은 여길 보시고 참고 하시면 될 것 같습니다.
    전 버전에 따라서 잘 안 된 적이 없었는데..
    뭐가 문제인지 궁금하네요 6^^
    2011.03.21 16:21 신고
  • 프로필사진 머핀스토리 SyntaxHighlighter 설정 잘 보고 갑니다.^^ 반나절을 이걸로 고생하며 보냈네요. 제 경우는 위와 같이 세팅했는데 계속 안되다가 </body>위에
    <script type="text/javascript">
    SyntaxHighlighter.all()
    </script>
    추가하구요. 그래도 안되어서 보니까
    <pre class=brush: java> 여기서 pre를 대문자로 바꾸니까 되는군요.ㅠㅠ
    대소문자 구분. 그리고 </body>위에 추가 한 내용 지우니까 또 안되고 결국엔 두부분을 변경해서 잘 사용하고 있습니다. 혹시 안되시는 분 PRE 대문자로 사용해 보세요^^ 좋은 글 감사드립니다.
    2011.04.26 12:50 신고
  • 프로필사진 똑똑한여자 덕분에 잘 설치하고 갑니다ㅎㅎ 아직 테스트는 안해봤지만 잘 될 것 같군요 ㅠ_ㅠ 문제가 생기면 여쭤보러 다시 오겠습니다~^^ 2011.06.19 03:28 신고
  • 프로필사진 똑똑한여자 흠.... 저도 myskan님처럼 아무것도 적용이 안되다가
    위에 머핀스토리님 댓글 보고 </body> 위에
    <script type="text/javascript">
    SyntaxHighlighter.all()
    </script>
    입력하니 적용이 되는군요..
    저는 pre를 대문자로 해주지는 않았습니다;;
    브라우저는 크롬입니다.
    2011.06.19 03:46 신고
  • 프로필사진 샤브이야기 너무너무 감사합니다.
    예전에 2.X 버전도 잘보고 갔는데.. 이렇게 3.X 버전까지 설명해주시니 너무너무 감사합니다.
    그런데.. 여기 있는 소스 그대로 하면 작동이 되나요?
    저는 외 작동이 안될까요?? 그래서 고민하다가 보니 아래와 같이 변경하니 작동되네요...

    42 번째 줄에 temp = temp.replace(//gi, "\n";); 되어 있는데요..
    temp = temp.replace(/<BR>/gi, "\n";); 이렇게 변경을 해야 정상 작동이 되네요..
    그리고,
    44 번째 줄에 temp = '<pre class="'+ jQuery(this).attr('class') + '">'+temp+'</pre>' 되어 있는데요.
    temp = '<pre class="'+ jQuery(this).attr('class') + '">'+temp+'</pre>'; 마지막 부분에 ';' 을
    해줘야 하는거 아닌가요??

    그리고,

    45 번째 줄을 지우고 44번째 주석을 풀어서 해도, pre 나 blockquote 2개다 작동이 되는데요..

    저만 그런건가요???? 댓글에 오류났다는 분이 아무도 없어서요...
    2011.06.25 20:38 신고
  • 프로필사진 신규하 아.. 좋은 지적 감사합니다.
    SyntaxHighlighter.config.stripBrs = true;
    제거 옵션중에서 BR 태그를 제거 하라고 해 뒀었는데..
    그것 때문에 br이 출력이 되지 않고 있었네요 ^^;;
    이런...
    그리고 44째줄은 주석입니다.
    45번째 줄과 필요하신 부분을 선택해서 쓰시라는 의미에서 해 놓은 겁니다.
    실행에는 아무런 영향도 미치지 않습니다.
    감사합니다.
    2011.06.25 21:33 신고
  • 프로필사진 Denial c언어 코드를 <pre>테크를 이용하여 작성하니 for루프에서 깨짐현상이 발생하는 군요. 혹시 SyntaxHighlighter 자체의 문제인가요? 2011.07.29 03:17 신고
  • 프로필사진 헤르메스™ 퍼가겠습니다.
    출처 밝히고요. 감사합니다.
    궁금한건 다시 올께요.. ^^
    2011.11.21 11:49 신고
  • 프로필사진 Jay Ma 감사합니다.
    퍼갈께요~^^
    2011.11.28 13:45 신고
  • 프로필사진 아삼 ㅠㅠ 저는 잘 안되요 ㅠㅠ
    1.X도 2.X도 3.X도 ㅠㅠㅠ
    도와주세요 ㅠㅠㅠㅠㅠㅠ
    2012.03.28 13:18 신고
  • 프로필사진 아삼 test라고 제일 최신글 남겼는데 안되용 ㅠㅠ
    아에 코드가 안보이는 묘한 현상이!
    2012.03.28 13:19 신고
  • 프로필사진 신규하 아삼님 블로그에 가서 확인해 봤는데..
    설정에는 별 이상이 없었습니다.
    혹시 모르니, 스킨을 바꿔서 시도해 보세요.
    2012.03.28 13:52 신고
  • 프로필사진 샤베니아 출처 남기고 퍼가겠습니다 ^^ 2012.05.15 11:38 신고
  • 프로필사진 샤베니아 아 저는 인용구 이용시
    <br>이 안들어가고
    <p></p>로 자동으로 감싸지네요 ㅠㅠ
    그래서 이렇게 바꿨습니다.

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

    근데 가끔 그 안에 font 태그도 자동으로 들어가버리더라고요 ㅡㅡ

    font태그는 어떻게 지울수 있을까요?
    2012.05.15 11:54 신고
  • 프로필사진 샤베니아 temp = temp.replace(/<font[^>]*>/gi, "";);
    temp = temp.replace(/<\/font>/gi, "";);

    정규식으로 해결했네요 ㅜㅜ
    2012.05.15 12:09 신고
  • 프로필사진 플룬 저는 왜 띄어쓰기가 안대죠???
    텍스트 모드에서 인용구 넣고, html가서 class ="brush:cpp"로 하고,
    html에다가 소스코드 붙였는데요;;
    띄어쓰기가 한개도 안되요. 그리고 header 선언부가 끝에 일케.
    #include <stdio.h>#include <list>using namespace std;int main(){ list ptr;}</list></stdio.h>
    이상하게 나와요 ㅠㅠ
    2013.04.04 12:19 신고
  • 프로필사진 신규하 html 편집 모드가 아닌 일반모드에서
    붙여 넣기 해 보세요.
    2013.04.09 09:08 신고
댓글쓰기 폼