티스토리에 Syntax Highlighter 2.0 적용하는 방법 (재게시)

사용자 삽입 이미지

티스토리에 Syntax Highlighter 2.0 적용하는 방법에서도 적었듯이, Syntax Highlighter 2.0은 많은 개선이 있었지만, 아이러니하게도, 티스토리에서 널리 사용되는 hi8ar.net님의 화이트보드 스킨에서는 정상동작을 하지 않았습니다.
(그래서 그 포스팅은 2.0을 적용하는 방법을 적은 글이지만, 1.5.1 환경에서 작성되었습니다)

원인은 스킨의 article.css.article code 속성이 shCore.css.syntaxhighlighter code 속성과 충돌하는 것입니다.
이 오류를 해결하려면 shCore.css에 다음 내용을 추가하면 됩니다.
.syntaxhighlighter code
{
    display: inline;
    overflow: visible;
}
직접 패치가 귀찮으면 아래 링크에서 다운받으시면 됩니다.


이 버전은 화이트보드 스킨과의 충돌을 해결한 것 외에도 아래의 기능들을 수정 보완했습니다.

1. 치환자 입력 가능

1.5.1에서도 추가했던 기능입니다. 아래와 같이 입력하면
[#\\#_title_#\\#]
이렇게 치환자를 입력할 수 있습니다.
[#\#_title_#\#]


2. 추가 언어파일 지원

1.5.1에서 추가했던 파일들을 2.0 환경에서 사용할 수 있도록 변환했습니다.
아래와 같이 지정하면 MSXAviSynth의 언어파일을 사용할 수 있습니다.
<script type="text/javascript" src="./images/shBrushMsx.js"></script>
<script type="text/javascript" src="./images/shBrushAvs.js"></script>


3. Copy to Clipboard 버그 수정

Syntax Highlighter 2.0.296은 Copy To Clipboard에서 &nbsp;가 그대로 복사되는 버그가 있습니다.
이 버그를 수정했습니다.

사용자 삽입 이미지

이 문제가 해결되었습니다. ㅡㅡ;



Trackback 0 Comment 31
  1. Favicon of http://e-forever.co.cc BlogIcon Forevler 2009.04.07 13:03 address edit & delete reply

    예전 포터블 프로그램 블로그에는 비슷한게 깔려 있었지만, 지금은 전혀 쓸데가 없는지라^^

    멋있어요 홀홀

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

      쓸수록 더 필요한 Syntax Highlighter랍니다. ^^;

  2. pardonk 2009.04.07 15:19 address edit & delete reply

    며칠 사이에 티스토리 애드온 폭발이군요.

    문제는 뭔소린지 아무 것도 모르겠다는.. OTLOTL

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

      블로그를 하나 만드시면 금방 아실 수 있습니다. ^^;

  3. Favicon of http://potocosmos.com BlogIcon 사진우주 2009.04.07 19:02 address edit & delete reply

    오홋.. 이 프로그램때문에.. 설치형 블로그로 나왔다는..;;;;[emo=004]
    그래서 많은 것을 배웠드랬죠^^..ㅋㅋㅋㅋㅋ

    이야.. 푸른색보다는 검은색이 멋찐데요~~!![emo=091]

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

      그런 일이 있으셨군요.
      블로그를 이전하면 이 색과 비슷한 보라색 계열의 테마를 사용할 생각입니다.

  4. Favicon of http://demun.tistory.com BlogIcon demun 2009.04.07 19:12 address edit & delete reply

    아직 저에겐 멀기만하군요.당최 모르겠으니 ㅎㅎㅎ
    공부를 좀 더 해야겠습니다.좋은 정보좀 많이 부탁합니다.

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

      언제나 step-by-step입니다!

  5. Favicon of http://minimonk.tistory.com BlogIcon 구차니 2009.04.08 02:12 address edit & delete reply

    textarea 못쓰게 되면서 일일이 찾아 다니며 수정을 한다고 조금 고생했지만
    엄청나게 빨라지고 안정적이 되서 좋긴합니다 ^^;

    이정도 버전에 티스토리에서 플러그인으로 지원하면 딱 좋겠네요 ㅠ.ㅠ

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

      저런... 설정을 바꾸면 textarea에서 동작하도록 할 수 있습니다. 이제 다 수정하셨다니 뭐...

      그런데, 이걸 플러그인으로 공급할 정신이 있었으면 1.5.1 시절에 이미 했을 것 같습니다. ㅠ.ㅠ

  6. Favicon of http://annoyst.tistory.com/ BlogIcon 잘난맛에사는 2009.04.08 03:10 address edit & delete reply

    억지로 짜맞춰서 겨우겨우 쓰고있기는 한데..
    다양한 스킨이 지원되었으면 하는 작은 바람이 있네요 ㅎㅎ

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

      지금 지원되는 스킨 정도면 기본적인 구성은 다 나온 것 같습니다.
      더 이상의 스킨은 사용자가 직접... 홍홍

    • Favicon of http://annoyst.tistory.com/ BlogIcon 잘난맛에사는 2009.04.08 09:51 address edit & delete

      크헉.. 이제 소스는 그만보고 싶어요..ㅠㅠ

  7. Favicon of http://nyaha.net BlogIcon 배제군 2009.04.08 08:56 address edit & delete reply

    다음에 소스코드 입력시 적용해봐야겠네요.
    좋은 정보 감사합니다. ^ㅡ^

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

      잘 쓰시기 바랍니다~

  8. Favicon of http://minimonk.tistory.com BlogIcon 구차니 2009.04.08 09:38 address edit & delete reply

    저는 pre 태그를 사랑합니다 ㅋㅋ
    그래서 textarea 보다는 pre가 좋더라구요(아무래도붙여 넣기도 편하고)

    매번 감사의 마음'만' 전합니다 ㅋㅋ
    언제 한번 옥토님과 더불어 만나뵙고 싶은데 말이죠 +_+

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

      "시간이 나면..."을 생각하면 한이 없을 것 같고...
      시간을 만들어서 한번 뵙죠. [emo=045]

  9. Favicon of http://neuru.tistory.com BlogIcon 꼬마 철학자 2009.05.14 01:37 address edit & delete reply

    안녕하세요?
    저는 현재 SyntaxHighlighter version 2.0.320 를 사용하고있습니다.

    항상 치환자 # 때문에 골치가 아픕니다.
    혹시 치환자를 사용할 수 있도록 하려면... 무엇을 어떻게 수정해야하는지.. 가르쳐주실 수 있으실까요?
    블루님께서 수정하신 내용중에 제게 필요한 부분은 치환자를 사용가능하게 하는 부분이라서...
    조언을 부탁드리고자 합니다.
    고맙습니다..

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

      저는 fixForBlogger() 함수를 수정했습니다.

  10. Favicon of http://neuru.tistory.com BlogIcon 꼬마 철학자 2009.05.14 23:25 address edit & delete reply

    헉...
    죄송합니다... 제가 질문을 너무 터무니없이 했나봅니다. 사실.. 전... 암것도 모르는 사람이에요. ㅎㅎㅎ
    그래서.. 혹시.. 어떤 파일에서 어느 부분에 어떤 부분을 추가해야하는지 여쭈어보려고 했는데... 제가 너무 급하게 질문했나봅니다. ;;;
    죄송합니다.
    fixForBlogger() 함수가 어떤 파일에 있나요? ^^;;; 뭐라고 수정하면 될런지요...
    귀찮으시겠지만... 한 번만 더 조언을 부탁드립니다. 죄송합니다. ;;;

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

      내일 오전에 2.0.320을 적용한 버전을 올릴 예정입니다.
      그 포스팅을 참조하시는 것이 좋을 것 같습니다.

      코드의 수정을 댓글로 하면 불필요하게 얘기가 길어지더군요.

  11. Favicon of http://neuru.tistory.com BlogIcon 꼬마 철학자 2009.05.14 23:26 address edit & delete reply

    죄송합니다.
    올리신 패치와 제가 현재 사용하고 있는 버전의 shCore.js 를 비교해봤습니다. 그런데.. 전혀 다른것 같더라구요. ;;;
    그래서.. 알려주신다하더라도 모를것 같습니다.
    애초에 가르쳐주실 수 있는 상황이 아닌것 같습니다. 죄송하네요. 좀 엉뚱하고 억지스러운 부탁임에도.. ㅎㅎ

    고맙습니다. (^^)(__)(^^)

    +
    아~!! +_+
    고맙습니다... 내일을 기다리면 되겠네요. 고맙습니다.

  12. Favicon of http://dlbo.tistory.com BlogIcon Lonewolf dlbo 2009.06.17 23:20 address edit & delete reply

    흘흘흘 -_-; 제 블로그는 저주받았나 봅니다.

    온갖 쇼를 다 해도 2.0이상의 syntaxhighlighter는 작동이 안되는군요 -_-ㅋㅋ;;;

    • Favicon of http://dlbo.tistory.com BlogIcon Lonewolf dlbo 2009.06.17 23:58 address edit & delete

      -_-a 이전 호환 가능 때문에 굳게 믿었건만 Legacy.js같은건 아무렇지도 않다는듯 신형 포맷만 인식하더라구요. 흑 -_-; 언제 태그 다 바꾸나 싶어서 꽤나 슬퍼요 ㄱ-

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

      1. 소스를 보니 <textarea>를 사용하셨던데, 혹시 의도적인 것인가요?
      아시겠지만, 2.0은 무조건 <pre> 태그만 처리하고, 다른 태그를 명시하면 ( 예컨데 <textarea> ) 그 놈만 처리합니다.

      2. 포맷이 <pre class="brush:cpp;"> 요따구로 변경되었습니다.

      3. c++라는 브러쉬는 없고, c 또는 cpp만 있습니다.

      다 해보시고서 말씀하시는 것이겠지만, 노파심에서 적어봅니다.

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

      헐~ 그렇군요...

      저는 이전 포스트의 태그를 몽땅 변환했는데... 프로그램을 하나 만들어서 돌려버렸답니다.

      혹시 도움이 필요하시면 말씀하시기 바랍니다. ^^;

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.06.18 13:25 address edit & delete

      차라리 소스를 약간 손대는 편이 어떨까하는 생각도 드네요.
      소스 앞쪽에 보시면 기본 태그를 <pre>로 명시한 곳이 있는데, 여길 <textarea>로 수정하는 방법도 괜찮을 것 같습니다.

  13. Favicon of http://dlbo.tistory.com BlogIcon Lonewolf dlbo 2009.06.19 15:02 address edit & delete reply

    현재 IE8.0과 크롬을 쓰고 있는데 둘다 SyntaxHighlighter 2.0이 제대로 안돌아가고,

    크롬은 1.5.1마저도 인식을 못하더라구요. 그래서 걍 1.5.1로 돌아갔습니다 -_-;

    크롬의 경우는 2.0만 인식하고 1.5.1은 버리고.

    왜 서로 반대일까요 ㅋㅋㅋ 궁금해지네 -_-;

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.06.19 15:28 address edit & delete

      이상하군요.
      저는 2.0이 IE8, FF3,크롬2 모두에서 잘 동작합니다.

  14. Favicon of http://dlbo.tistory.com BlogIcon Lonewolf dlbo 2009.06.23 18:12 address edit & delete reply

    왜 안되는지 알아냈습니다 ㅋㅋㅋ IE + 윈도우즈 XP 세큐마이즈 에디션을 사용할 경우 충돌이 있군요. 다른 사람들의 블로그에서 2.0을 적용한건 보이나, 자신의 블로그에선 적용한게 안보입니다. 로그인을 하지 않아도 본인블로그에선 적용이 안되는군요 ㅋㅋㅋ -_-; 다른 컴 몇대를 사용해서 본 결과 적용이 잘 됐습니다. 혹시 지금 윈도우 블랙에디션같은 변형 쓰시나요?

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

      Windows 7 사용합니다. ㅎㅎㅎ