티스토리에 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. 관련 파일의 설치

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

SyntaxHighlighter20_bugpatched.zip

이 파일에는 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님의 화이트보드 스킨에서는 정상동작을 하지 않습니다.