티스토리에 Syntax Highlighter 3.0.83 적용하기


사용자 삽입 이미지

Syntax Highlighter는 현재 3.0.83까지 공개되었다.
텍스트큐브닷컴에 적용하는 방법을 공개했지만, 텍큐닷컴은 곧 폐쇄 예정이고, 티스토리엔 적용법이 약간 달라 다시 포스팅한다.

일단, 3.0은 2.x대에 비해 다음과 같은 개선이 있다.

1. 플래쉬 완전 제거

기존의 1.x, 2.x에서는 copy to clipboard 기능을 구현하기 위해 플래쉬를 사용했다.
하지만, 3.x에서는 플래쉬를 완전히 제거하고 브라우저의 기본적인 복사 기능만으로 이 기능이 동작하도록 구현했다.


2. 화면에서 코드 직접 선택 가능

2.x까지는 코드를 선택해보면 일부분만 선택되었다. (그래서 copy to clipboard 기능이 있었음)
하지만, 3.x에서는 원하는 범위까지 코드의 선택이 가능하다.

게다가 더블클릭하면 코드 전체를 선택해준다.


3. 자동 하이퍼링크 생성

코드 중에 하이퍼링크가 있으면 하이퍼링크를 클릭할 수 있도록 해준다.


4. XRegExp 사용

3.x는 정규식 확장 중 하나인 XRegExp를 사용한다.
(그래서 어쩌라고!)


5. CommonJS 완전 호환

(그래서 어쩌란 거냐고!)


6. CSS 지원 강화

CSS의 지원이 강화되었다. 게다가 SASS 3.0도 지원한다.
(다시 한번 말하는데, 그래서 어쩌란 거냐고!!!)


그런데, 이 SH3는 티스토리에서 그대로 사용할 수 없다.
적용은 가능하지만, 일부 코드가 정상적으로 출력되지 않는다.

그래서 약간의 수정을 가했다.

1. 치환자 입력을 위해 \#를 #로 변환

기존의 티스토리/텍스트큐브 용 SH에서도 적용했던 건데, 지금 와서 없애긴 뭣해서 다시 적용했다.
\#라고 입력하면 #로 출력해준다.
즉, [#\#_HELLO_#\#]이라고 쓰면 [###_HELLO##_]와 같은 치환자로 변신하는 것이다.


2. 코드 맨 앞과 맨 뒤의 <br /> 또는 엔터 제거

왜 생기는지는 모르겠지만, 가끔 이런 형태가 생기는 경우가 있더라.
그래서, 코드 맨 앞뒤에 엔터나 <br />이 있는 경우 제거하도록 했다.


3. bloggerMode시 &lt;br&gt; 정상처리

티스토리에서 <br> 태그를 정상적으로 처리하려면 bloggetModetrue로 설정해야 한다.
그런데, 문제는 이렇게 하면 <br> 외에도 &lt;br&gt;도 엔터로 처리한다.

코드 일부를 수정해서 &lt;br&gt;는 처리하지 않도록 수정했다.
따라서, html 코드나 sami 자막에서 <br> 태그를 표현할 수 있다.


설치하는 방법은 아래와 같다.


1. 파일 업로드

아래 파일을 다운받아 압축을 풀어 스킨에 업로드한다.



2. 스킨 수정

스킨의 <head> 영역 내에 다음 내용을 삽입한다.

<script type="text/javascript" src="./images/shCore.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/shThemeDefault.css"/>
<link type="text/css" rel="stylesheet" href="./images/shCore.css"/>

<script type="text/javascript">
//<![CDATA[
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
//]]>
</script>


3. style.css 약간 수정 (2011.3.14 추가)

이상하게 구글 크롬에서는 불필요한 세로 스크롤바가 생긴다.
이 스크롤바를 안 생기게 하려면 스킨 편집에서 style.css에 다음 한 줄을 추가하면 된다.

div .syntaxhighlighter { overflow-y: hidden!important; overflow-x: auto!important; }


4. 티스토리+IE 버그 관련 수정 (2011.4.15 추가)



5. 기타사항

a. SH3는 계속 업데이트 되고 있으며, 새로운 테마언어 파일은 홈페이지에서 찾을 수 있다.

b. 근 1년 만에 티스토리로 돌아왔는데, 티스토리 새관리의 멍청한 버그는 그대로 남아있다.
티스토리 개발자들은 정말 게으른 것 같다.

<pre> 태그 내에 내용을 입력하면 엔터가 계속 2개로 늘어나는 버그는 그대로다.
즉, Syntax Highlighter를 사용하려면 기존관리를 쓰는 수밖에 없다. 헐~
이 버그 자체는 수정되었으니, 원천적 문제는 남아있기 때문에 4.의 현상이 발생한 것임.


Trackback 0 Comment 14
  1. Favicon of http://minimonk.tistory.com BlogIcon 구차니 2010.12.19 22:55 address edit & delete reply

    티스토리에서 언넝 이 포팅작업을 빼앗아가야 블루님이 편해지실텐데요 ㅎㅎ

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2010.12.19 23:07 address edit & delete

      이미 포기했습니다.
      이건 뭐 볍진도 아니고…
      1년만에 돌아왔는데, 문제점이나 한계는 하나도 바뀐 게 없어요.

  2. Favicon of http://salm.pe.kr/ BlogIcon koc/SALM 2010.12.24 15:34 address edit & delete reply

    텍큐의 [b][[/b]code] [/code]도 지원해 주실 수 있나요?
    이미 망한 서비스지만, 그래도 글을 하나씩 고치려니 조금 그러네요.
    안 고쳐주시면 어쩔 수 없이 모든 글을 열어보고 고치는 수밖에요.

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

      텍큐용 BBCode에도 [ code ] 태그를 지원하게 해달라는 뜻인가요?
      지원됩니다. ^^

    • Favicon of http://salm.pe.kr/ BlogIcon koc/SALM 2010.12.24 20:51 address edit & delete

      텍큐닷컴의 문법 강조는...
      [b][code[/b] text] ...내용... [/code]
      였습니다. 그런 형식으로 지원이 가능한지를 묻는 거였습니다.
      안 된다면... 앞서 썼듯이 하나하나 고치는 수밖에요.
      ^^a

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2010.12.24 21:54 address edit & delete

      아... 이제 이해를...
      사실, 갠적으로는 그렇게 변환해주는 프로그램을 하나 만들었습니다.
      공개하기 좀 뭣해서 혼자 쓰긴 하지만...

      그리 완벽하지도 않고, 오히려 수작업을 꽤 많이 해야 되지만, 귀찮은 작업을 꽤 없앨 수 있어서 하나 만들었습니다.

      전들 뭐 일일이 다 변환했겠습니까. 흐흐흐

    • Favicon of http://salm.pe.kr/ BlogIcon koc/SALM 2010.12.25 18:29 address edit & delete

      제가 말한 것은 변환해 주는 프로그램이 아닙니다.
      그저 변환 없이 웹에서 바로 보여줄 수 있는지를 묻는 것이었습니다.

      지금 하나씩 고쳐가고 있습니다. ^^a
      언젠가는 다 끝나겠죠.
      그런데... 고치기 전에 또 옮기면 난감...이 아니라, 완전 낭패...가 될 듯... ^^a

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2010.12.25 20:34 address edit & delete

      변환없이 한방에 가는 방법은 고려해보지 않았습니다.
      백업파일을 자동으로 변환하는 방법만 고려했습니다.

      프로그램 만들기가 번거로워서 그렇지, 가장 확실한 방법이니까요.

      그러다 다시 옮기면 골룸 되고… (응? 뭐야?)

  3. Favicon of http://happytrees.co.kr BlogIcon happytrees 2011.02.21 18:26 address edit & delete reply

    Syntax Highlighter 영영 못쓰나 싶었떠니 관리자님 덕분에 이렇게 잘씁니다 ^^ 무척 감사합니다.

  4. Question 2011.03.14 05:01 address edit & delete reply

    덕분에 잘 적용 되었습니다.
    질문이 있습니다_ 똑같이 했는데 왜 상,하 스크롤바가 생기죠??
    좌우가 길어서 좌우 스크롤바가 생기면 상,하 스크롤바도 같이 생깁니다.
    그런데 님 블로그를 보니 상,하 스크롤바는 안생기던데 왜일까요??

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

      본문에 해당사항을 추가해뒀습니다.

  5. Favicon of http://minimonk.tistory.com BlogIcon 구차니 2011.03.19 21:32 address edit & delete reply

    으헙! 플래시 제거 버전이라니 다시 시간내서 설치를 해야겠군요! +_+!

    그러고 보니.. 코드관련 글을 쓴지가 반년이 넘은 느낌이에요 ㅠ.ㅠ

  6. Favicon of http://colly.tistory.com BlogIcon 콜리 2011.07.20 12:23 address edit & delete reply

    좋은 정보 감사합니다. 잘 적용했어요~:)

  7. Favicon of http://spacechild.kr BlogIcon 루나리안 2011.09.08 10:52 address edit & delete reply

    IE8 두줄 에러는 어떻게 해결 하셨나요?