티스토리에 Syntax Highlighter 2.0 적용하는 방법

사용자 삽입 이미지

블로그 관련 to-do 리스트에서 공지한 사항 중 하나인 Syntax Highlighter 2.0을 티스토리에서 적용하는 방법입니다.
많은 분들이 관련 글을 올려주셨는데, 이상하게 한 가지는 모두들 빠뜨리시더군요. 그 부분을 포함해서 설명하겠습니다.

우선 2.0이 기존의 1.5.1에 비해 바뀐 부분은 아래와 같습니다.

1. CSS 형식테마 기능
2. 지정된 행의 강조
3. 자동 줄넘김 기능
4. XHTML 표준 준수


이 과정에서 형식이 약간 변경되었습니다.

1. 인자 형식의 변경
   <pre name="code" class="html">의 형식에서 <pre class="brush:html;">의 형식으로 변경되었습니다.

2. 실행 함수 이름과 위치의 변경
   dp.SyntaxHighlighter.HighlightAll('code'); 가 html의 마지막에 위치하는 것에서
   SyntaxHighlighter.all(); 가 html의 헤더에 위치하는 것으로 변경되었습니다.
   (1.5 시절에 입력된 내용을 위해 호환 모드도 지원합니다)

3. <pre>, <textarea> 에서 동작되던 것이 <pre>에서만 동작하도록 변경
   <pre>에서만 동작되며, <textarea> 등의 다른 태그에서 동작시키려면 별도로 지정해야 합니다.


설치 및 사용법은 아래와 같습니다.


1. 관련 파일의 설치

아래 링크에서 다운받은 파일의 압축을 푼 뒤 스킨 올리기 기능을 이용해서 올립니다.


이 파일에는 SH 2.0의 기본 언어 외에 AviSynth 스크립트MSX 베이식 언어 파일이 포함되어 있습니다.


2. 스킨의 수정

스킨 앞부분, 정확히는 </head> 앞부분에 아래의 내용을 추가합니다.
    <script type="text/javascript" src="./images/shCore.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/shBrushJScript.js"></script>
    <script type="text/javascript" src="./images/shBrushPlain.js"></script>
    <script type="text/javascript" src="./images/shBrushXml.js"></script>
    <script type="text/javascript" src="./images/shBrushMsx.js"></script>
    <script type="text/javascript" src="./images/shBrushAvs.js"></script>
    <script type="text/javascript" src="./images/shLegacy.js"></script>
    <link type="text/css" rel="stylesheet" href="./images/shCore.css"/>
    <link type="text/css" rel="stylesheet" href="./images/shThemeViolet.css"/>
    <script type="text/javascript">
        SyntaxHighlighter.config.bloggerMode = true;
        SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
        SyntaxHighlighter.all();
    </script>
</head>
주목해야 할 부분은 16행의 ~bloggerMode = true;입니다.
티스토리의 위지윅 화면에서 코드를 입력하면 각 행의 끝에 <br> 태그가 삽입되는데, 대부분의 포스트에서 이 <br> 태그를 지우라고 적었더군요.
그런데, 이와 같이 설정하면 각 행의 <br>을 자동으로 엔터로 변환합니다.
즉, 위지윅 화면에서 코드만 입력하는 것으로 충분하단 얘기입니다.
(이 내용이 앞에 적은 다들 빠뜨린다는 바로 그 부분입니다)

만약 새롭게 2.0을 사용하는 것이 아니라 1.5를 사용하시던 분이라면 스킨 맨 마지막 부분에 아래 내용을 추가해야 합니다.
    <script type="text/javascript">
        dp.SyntaxHighlighter.HighlightAll('code');
    </script>
</body>
이 코드는 기존 방식으로 입력된 내용을 2.0의 방식으로 내부적으로 호출해주는 코드입니다.


3. 코드에 태그 추가

위지윅에서 코드를 입력한 뒤에 HTML 편집화면으로 이동해서 코드의 앞뒤에 <pre> 태그를 씌웁니다.
뒷부분에는 그냥 </pre>만 씌우면 되지만, 앞부분은 조금 신경써야 합니다.
<pre class="brush:c-sharp; highlight:[3,5];">
속성값 중 highlight는 강조할 행을 표시할 떄 사용합니다.


4. 문제점

SH2.0은 웹 표준 준수를 비록하면 많은 부분에서 안정성을 꽤했습니다.
하지만, 아이러니하게도 제가 지금 사용하는 hi8ar.net님의 화이트보드 스킨에서는 정상동작을 하지 않습니다.


Trackback 1 Comment 23
  1. Favicon of http://minimonk.tistory.com BlogIcon 구차니 2009.04.06 09:46 address edit & delete reply

    오홋 한번 시간내서 설치해봐야겠습니다 +_+
    매번 좋은자료 감사합니다 >_<b

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.04.07 00:05 address edit & delete

      잘 쓰시기 바랍니다.
      그리고, 현재 스킨과 충돌하는 문제의 원인을 찾았는데... 너무 바빠 포스팅 불가크리~

  2. Favicon of http://minimonk.tistory.com BlogIcon 구차니 2009.04.07 16:10 address edit & delete reply

    설치 한다고 위에 메인 소스 복사하는데
    FF에서는 스페이스가 &nbsp로 복사되네요 ㅋ
    그래서 그냥 소스보기 해서 복사를 했답니다 ^^;

    IE에서는 정상작동하나요?

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.04.07 16:27 address edit & delete

      그 문제의 발생은 확인했습니다.
      IE는 안 써서 모르겠고, FF, 크롬에선 &nbsp;로 나오더군요. ㅠ.ㅠ

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.04.07 16:30 address edit & delete

      역시 IE...
      원래 IE는 정규식으로 문자열을 치환할 때 \s (공백)을 제대로 처리하지 못하는 버그가 있습니다. (무려 IE8도 마찬가지입니다)

      IE에서는 그냥 &nbsp;를 표시하지 않습니다. 대단한 IE씨...

      두 브라우저를 위해서 코드에 약간 손을 대야 될 것 같군요...

    • Favicon of http://minimonk.tistory.com BlogIcon 구차니 2009.04.07 16:40 address edit & delete

      버그로 인해 제대로 작동하는 것으로 보이다니
      대단한 버그인데요 ㅋㅋ

      알집의 신화에 버금가겠어요 ㅋㅋ

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.04.08 01:44 address edit & delete

      이 버그를 해결한 버전을 올려뒀습니다.

  3. Favicon of http://koc2000.tistory.com/ BlogIcon koc2000/SALM 2009.04.29 09:26 address edit & delete reply

    좋은 정보 고맙습니다. 흠... 한 번 적용해 봐야겠네요.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.04.29 12:56 address edit & delete

      잘 쓰시기 바랍니다. ^^;

  4. Favicon of http://miru.tistory.com BlogIcon miru 2009.05.24 10:09 address edit & delete reply

    BLUEnLIVE님의 바이올렛테마를 외부스타일 파일로 정의해놓고,,,
    <PRE>~</PRE> 태그에서 호출하는 방식인 것 까진 알겠는데,,,

    <PRE>태그에서 호출할 때 형식을
    <PRE class=" "> 어떻게 넣어줘야 바이올렛테마로 호출하는 건지요?

    계속 기본테마로 보여지네요~ OTL

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.05.24 10:53 address edit & delete

      테마는 css만 지정하면 적용됩니다.
      소스를 보니 제대로 되어있더군요.

      실제 SH를 적용한 페이지를 찾지 못했는데, 실제 사용한 페이지를 알려주시면 확인해보겠습니다.

      참, 2.0.320으로 업데이트되었습니다.

  5. Favicon of http://blog.daum.net/miriya BlogIcon miriya 2009.07.05 16:46 address edit & delete reply

    http://miriya.tistory.com/34
    여기선 이상하게 코드 위에 마우스를 안올려도 우측 상단에 도구모음이 보입니다.
    이건 어떻게 해결해야하나요?

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.07.05 22:29 address edit & delete

      새 버전으로 업데이트 하세요.

  6. Favicon of http://blog.jidolstar.com BlogIcon 지돌스타 2009.10.20 10:35 address edit & delete reply

    덕분에 쉽게 설치했습니다.


    http://blog.jidolstar.com/568

  7. Favicon of http://koc2000.tistory.com/ BlogIcon koc/SALM 2009.11.11 19:39 address edit & delete reply

    질문 1.
    [quote]3. <pre>, <textarea> 에서 동작되던 것이 <pre>에서만 동작하도록 변경
    <pre>에서만 동작되며, <textarea> 등의 다른 태그에서 동작시키려면 별도로 지정해야 합니다.[/quote]
    별도로 지정하는 방법이 어떻게 되는지요? 제 경우는 <code>라고 따로 태그를 만들고 싶습니다. 티스토리가 xhtml 기반이므로 태그도 만들 수 있다고 알고 있거든요.

    질문 2.
    요 아래 댓글창 위에 보이는 아이콘으로 된 BBCode 편집 도구는 어떻게 다는 건가요? (티스토리에서는 불가능하더라도 설명을 부탁드립니다.)

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.11.12 10:08 address edit & delete

      1. 선언부에 tagName이란 값을 지정하면 된다고 합니다.
      아래 링크를 참조하시기 바랍니다.
      http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration

      2. 그냥 "빡시게" 집어넣은 코드입니다.
      textarea에 name 값 부여해서 이미지 클릭하면 삽입하도록 만들었습니다.

    • Favicon of http://koc2000.tistory.com/ BlogIcon koc/SALM 2009.11.12 17:48 address edit & delete

      예. 고맙습니다. tagName 은 자바스크립트에 대해 잘 몰라도 할 수 있는 문제이므로 당장 해야겠구요.
      textarea 문제는 자바스크립트에 대해 잘 모르면 해결하기 힘든 문제로 보이므로 우선 패스해야겠네요.

  8. Favicon of http://bhythmmaker.blogspot.com BlogIcon 희노락 2009.12.07 22:02 address edit & delete reply

    좋은 정보 감사합니다 ^^

  9. Favicon of http://minimonk.tistory.com BlogIcon 구차니 2010.02.25 18:14 address edit & delete reply

    2.0 에서는
    <pre name="code" class="cpp"> 형식으로 사용할수 없는건가요? ㅠ.ㅠ

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2010.02.25 19:45 address edit & delete

      <script type="text/javascript" src="./images/shLegacy.js"></script>

      쓰면 되는거라능...

  10. Favicon of http://tysite.textcube.com BlogIcon 악마곰 2010.06.25 14:00 address edit & delete reply

    질문 있습니다.
    http://tysite.tistory.com/6 여기 보시면 최신 버젼으로 적용해놨는데요
    sql 은 잘 안먹는 건가요?
    최신 버젼 내려서 테스트 해도 같은 결과로 나오네요
    콤마를 인식 못하네요

    텍스트큐브에서는 잘나오는데...

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2010.06.25 19:16 address edit & delete

      sql 브러쉬를 적용해본 적이 없어 답 드리기가 어렵네용. ^^;

  11. 케미컬 2010.12.21 10:58 address edit & delete reply

    아~ 이런글이 구글검색때 첫페이지에 나와야 하는데!! 흠!!!
    글 너무너무 잘 읽고 갑니다.
    말하셨듯 중요한 몇가지를 빼먹은 글이 많아서요. --;;;;
    ㅎㅎㅎ :D