컴퓨터/인터넷2007/10/26 10:49

syntaxhighlighter를 tistory에서 사용 하는 방법.


syntaxhighlighter를 tistory에 설치 하는 방법

syntaxhighter란 홈페이지에 있는 소스코드를 아래와 같이 색상으로 구문 강조를 해 주는 기능 입니다.

#include <stdio.h>
int main( int argc, const char* argv[] )
{	
	printf( "\nHello World\n\n" );
}


우선 아래 주소에 가서 현재 최신 버전인 SyntaxHighlighter_1.5.1.rar를 다운 받습니다.
 
     http://code.google.com/p/syntaxhighlighter/

가기도 귀찮으신 분은 아래 파일을 다운로드 받으시면 됩니다.

압축을 풀면 아래와 같이 3개의 디렉토리가 나옵니다.

사용자 삽입 이미지

여기서 Styles디렉토리를 css파일이 있습니다. 그리고 scripts와 uncompressed는 같은 내용의 자바스크립트가 들어 있습니다. 다른점은 내용이 압축이 되어 있고 없고 차이 입니다.
올리 때는 둘 중에 하나를 선택해서 올리시면 됩니다. 개인적으로는 scripts에 있는 파일을 올리시길 권장 합니다. 조금이라도 페이지 로딩 속도를 빠르게 하는게 좋으니까요. ^^;;
사용자 삽입 이미지

이제는 스크립트 파일을 업로드 하고 편집을 해 보겠습니다. 먼저 tistory의 스킨 메뉴로 가서 [HTML/CSS]를 선택 합니다.
사용자 삽입 이미지

html/css편집 모드에서 [파일 업로드] 버튼을 눌러 줍니다.
사용자 삽입 이미지

위와 같이 scripts 디렉터리와 styles디렉터리에 있는 모든 파일을 올려 줍니다.
캡쳐 공간이 부족해서 clipboard.swf파일은 빠졌네요 ^^; 그 파일도 역시 올려 줍니다.

업로드가 끝나면 다시 [HTML/CSS] 편집 모드로 돌아 갑니다.
사용자 삽입 이미지
여기서 페이지 상단에 css를 포함 하는 부분에 다음 줄을 추가 해 줍니다.


<link type="text/css" rel="stylesheet" href="./images/SyntaxHighlighter.css"></link>

위에 줄을 복사 하시면 됩니다.
사용자 삽입 이미지

그리고 페이지 하단에 </body>태그 위에 아래 문장을 복사 해 줍니다.
여기서 포함하는 스크립트의 순서는 별 지장이 없습니다. 하지만, 가장 위에 있는 shCore.js 파일의 위치는 항상 위로 올라가야 정상적으로 동작하는 것만 주의해 주시면 됩니다.

<script class="javascript" src="./images/shCore.js"></script>
<script class="javascript" src="./images/shBrushCSharp.js"></script>
<script class="javascript" src="./images/shBrushCpp.js"></script>
<script class="javascript" src="./images/shBrushCss.js"></script>
<script class="javascript" src="./images/shBrushDelphi.js"></script>
<script class="javascript" src="./images/shBrushJScript.js"></script>
<script class="javascript" src="./images/shBrushJava.js"></script>
<script class="javascript" src="./images/shBrushPhp.js"></script>
<script class="javascript" src="./images/shBrushPython.js"></script>
<script class="javascript" src="./images/shBrushRuby.js"></script>
<script class="javascript" src="./images/shBrushSql.js"></script>
<script class="javascript" src="./images/shBrushVb.js"></script>
<script class="javascript" src="./images/shBrushXml.js"></script>
<script class="javascript">
	dp.SyntaxHighlighter.ClipboardSwf = './images/clipboard.swf';
	dp.SyntaxHighlighter.HighlightAll('code');
</script>

위와 같은 내용을 skin.html에 포함해 주시면, 설치는 끝났습니다.
그리고 여기 있는 모든 .js파일을 포함 하실 필요는 없습니다.
사용자 분이 주로 사용하는 언어만 넣어 주신다면, 로딩 속도가 조금이나마 빨라 지겠죠?
그렇다고 shCores.js파일은 빼지 마세요. 빼면 동작을 하지 않습니다.

이제는 설치가 끝났습니다. 마음껏 사용을 해 주시면 됩니다.

syntaxhighlighter 사용하기.

tistory에서 사용하기 위해서는 좀 귀찮습니다.
솔직히 기본 편집모드에서 편집하면서 사용하는것은 거의 힘이 듭니다.
복사해서 붙여넣기를 하는 방법으로 사용하시길 권장합니다.

먼저 사용하는 방법은 <pre>테그를 이용하는 방법과 <textarea>테그를 이용하는 방법등 2가지가 있습니다.
먼저 <pre>테그를 사용하는 방법 입니다.

<pre name="code" class="c-sharp">
   ... some code here ...
</pre>

pre테그를 사용할 경우에느 <와 같은 html테그를 사용할 경우 &lt;와 같이 변환을 해서 사용해야 합니다. 테그가 좀 편하긴 하지만, 꺽쇠(<) 테그로 인해서 귀찮은 경우가 있습니다.
다음으로 <textarea> 테그를 사용하는 방법입니다.
<textarea name="code" class="c#" cols="60" rows="10">
  ... some code here ...
</textarea>
<textarea>테그로 쓸 경우 귀찮은 <를 &lt;로변환 하지 않아도 됩니다.
못쓰는 경우는 내용물에 </textarea>를 쓰는 경우 빼고는 없습니다. 중간에 </textarea>를 쓰게 되면, 중간에 멈춰 버리게 되겠죠?
저 같은 경우에도 바로 위의 <textarea> 샘풀의 경우 내용물에 </textarea>가 들어가야 해서 에는 <pre>테그를 사용해서 표현 했습니다.
꼭 한가지가 답은 아닌가 적당하게 섞어서 사용하시면 되겠습니다.
하지만, 특별한 경우가 아니면, <textarea>테그를 사용하는 것을 권장합니다.

여기서 class뒤에 넣은 형태는 아래 표의 명칭을 보시고 넣으시면 됩니다.
언어  명칭
C++ cpp, c, c++
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt

기본적이 사용법은 이렇게 이해 하시면 됩니다.

그런데, tistory에서는  edit상태에서는 입력을 하시면 입력한 값이 그대로 나와 버리고 코드로 나오지 않습니다.
사용자 삽입 이미지
이럴때는 edit모드 버튼을 눌러서 html모드로 편집해 주시면 됩니다.

편집 할 때 보기에는 별로 안 좋고 귀찮기는 하지만, 그래도 결과물이 잘 나오니까 걱정하지 마시고 쓰시면 됩니다.
그럼 잘 사용하세요~

ps. 좀더 상세한 사용법을 보실려면 syntaxhighlighter 홈페이지를 방문해서 확인 하세요~

관련글 : SyntaxHighlighter 2.X를 tistory에 적용하기.


끝~

more..

이올린에 북마크하기(0) 이올린에 추천하기(0)

'컴퓨터 > 인터넷' 카테고리의 다른 글

MS의 새로운 검색엔진.. Bing  (0) 2009/06/06
한rss에서 Google리더로 옮겼습니다.  (5) 2007/12/10
syntaxhighlighter를 tistory에서 사용 하는 방법.  (80) 2007/10/26
새로운 위키 서비스 스프링노트 시연 동영상..  (2) 2007/03/20
웹Rss를 써보자..  (0) 2007/02/15
통으로 퍼오자!!!  (2) 2005/08/16
Posted by 신규하
TAG , , ,
Trackback 36 Comment 80

댓글을 달아 주세요

  1. BlogIcon 열이아빠

    그림책이어도 너무 쉽게 설명해주셔서 감사합니다.
    예전에 다른자료보고 어찌하는건가 몹시 궁금했는데...
    속이 다 시원하네요..ㅎㅎ

    2007/10/31 11:19 [ ADDR : EDIT/ DEL : REPLY ]
  2. BlogIcon 기선

    감사합니다. 요긴하게 쓰겠습니다.

    2007/11/14 16:37 [ ADDR : EDIT/ DEL : REPLY ]
  3. BlogIcon ^AMB^

    근데요 이게 뭐하는 거에요.. 어떤 변화가 일어나는지 모르겠네요.
    1.2..3.4.5.6.7.8.9.10,11,12.13.1.4이것만 왼쪽상단에 있고 티스토리 배너가 없네요.
    이런 분야에 전혀 문외한이라..그냥 궁금해서 따라 해봤는데.. ㅇ아이구 이런....도와 주세요.

    2007/11/15 16:33 [ ADDR : EDIT/ DEL : REPLY ]
    • BlogIcon 듬직이

      위 방법은 프로그램 소스를 웹페이지에서 볼 때 보기 편하게 하도록 하기 위해서 색상을 입히는 방법입니다.

      ^AMB^님의 경우에는 소스코드 앞에 있는 숫자까지 붙여 넣기를 하셨네요 ^^;
      그래서 숫자가 나온것입니다.

      1. <script class="javascript" src="http://cfs.tistory.com/custom/blog/11/117188/skin/images/shCore.js"></script>

      그리고 오류가 나는 것은
      <SCRIPT class=javascript>
      15. dp.SyntaxHighlighter.HighlightAll('code');
      16. </SCRIPT>
      이렇게 붙여 넣기를 하셨습니다.
      앞에 숫자가 들어 가서 오류가 발생하고 있습니다.
      옮겨 넣기를 하시다가 잘 못 넣은 신것 같습니다.

      그리고 스크립트의 위치가 중요 한테.. 스크립트를 페이지 하단에 넣어 주세요. 위에 위치해 있으면 동작을 하지 않습니다.

      2007/11/17 09:35 [ ADDR : EDIT/ DEL ]
  4. BlogIcon leonid

    우와~ 이렇게 좋은 것이 있었다니!! 정말 감사합니다.

    2007/11/16 23:52 [ ADDR : EDIT/ DEL : REPLY ]
  5. BlogIcon Rhox

    저도 IT 블로그를 운영하고 있느라 정말 급했는데 결국 해결했네요~!
    좋은 정보 감사합니다~!

    2007/11/17 12:34 [ ADDR : EDIT/ DEL : REPLY ]
    • BlogIcon 듬직이

      잘 해결 되었다니 다행이네요.
      잘 사용하세요.

      2007/11/20 15:57 [ ADDR : EDIT/ DEL ]
  6. BlogIcon 페이비안

    아 평소에 정말 궁금해하던 부분이었는데 정말 자세히 설명해주셨네요.
    HTML이나 CSS 문외한인지라.. 이런 거 하나하나 배우는 게 정말 재밌습니다.
    문제라면, 한 번 써먹은 후에는 완전히 망각해버린다는 점이지만요. ^^;
    이번에는 잊지 않기 위해 북마크를..!

    2007/11/20 10:18 [ ADDR : EDIT/ DEL : REPLY ]
    • BlogIcon 듬직이

      재미있다고 하시니 기쁘네요 ^^*
      다음에 기회가 되면 다른것도 포스팅 해 보겠습니다.

      2007/11/20 15:58 [ ADDR : EDIT/ DEL ]
  7. BlogIcon 양파껍데기

    좋은정보 감사합니다..
    근데 제껀 먼가 문제가 있는지 옆에 라인수가 나오질 않네요...
    스킨과 먼가 충돌이 나는걸까요...
    다른스킨에 적용하면 제대로 나오긴 하는데...끙..ㅠㅠ

    2007/12/10 04:37 [ ADDR : EDIT/ DEL : REPLY ]
  8. BlogIcon 프로니어

    오호.. 이 정보를 찾고 있었는데 캡쳐까지 하셔서 아주 잘 설명해 주셔서 감사합니다.

    2007/12/17 19:20 [ ADDR : EDIT/ DEL : REPLY ]
  9. BlogIcon 으휴

    안녕하세요. 좋은 글이네요. 참고 하고 갑니다. 수고하세요.

    2007/12/19 20:02 [ ADDR : EDIT/ DEL : REPLY ]
  10. BlogIcon Toris

    감사합니다^^ 좋은글이네요. 글 좀 링크할께요~

    2008/01/20 03:34 [ ADDR : EDIT/ DEL : REPLY ]
  11. BlogIcon sangpire

    감사합니다. ^^ 너무 잘 되네요...

    2008/01/24 00:41 [ ADDR : EDIT/ DEL : REPLY ]
  12. BlogIcon naggingmachine

    좋은 정보 감사합니다. ^^

    2008/01/24 15:57 [ ADDR : EDIT/ DEL : REPLY ]
  13. BlogIcon 인형오리

    설명이 잘되어있어서 따라하기 쉬웠습니다.
    좋은 정보 감사합니다. ^^

    2008/03/25 14:54 [ ADDR : EDIT/ DEL : REPLY ]
  14. BlogIcon kjunine

    정말 쉽게 잘 쓰셨네요 ^^

    다만.. 가장 긴 소스 15번째 줄에
    dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
    가 아니라
    dp.SyntaxHighlighter.ClipboardSwf = './images/clipboard.swf';
    가 되어야 클립보드가 제대로 동작하는 것 같습니다. ^^;

    2008/04/10 19:51 [ ADDR : EDIT/ DEL : REPLY ]
    • BlogIcon 듬직이

      아.. 맞습니다.
      제 블로그에는 그 경로로 했는데..
      나중에 추가 하다가.. 실수를 했습니다.
      좋은 지적 감사합니다.

      2008/04/11 14:23 [ ADDR : EDIT/ DEL ]
  15. BlogIcon 준호씨

    멋진 설명 감사드립니다. ^^
    덕분에 한방에 설치할 수 있었습니다.

    2008/04/12 12:13 [ ADDR : EDIT/ DEL : REPLY ]
  16. BlogIcon Sway

    감사합니다.~

    2008/04/23 02:08 [ ADDR : EDIT/ DEL : REPLY ]
  17. BlogIcon 코딩하는잡부

    좋은 내용 감사합니다.~~

    2008/04/26 19:57 [ ADDR : EDIT/ DEL : REPLY ]
  18. BlogIcon 켄조쿤

    제 블로그에도 설치했는데 왜 하이라이트가 되지 않을까요? ㅠㅠ

    2008/05/07 10:52 [ ADDR : EDIT/ DEL : REPLY ]
    • BlogIcon 듬직이

      블로그의 주소와 tistory의 주소가 달라서 그런거 아닐까?
      절대 경로가 아니라 상대 경로로 설정해 보세요.

      2008/05/09 13:46 [ ADDR : EDIT/ DEL ]
  19. BlogIcon 오리대장

    좋은 정보 감사합니다.
    잘 쓸게요.~~

    2008/05/14 13:40 [ ADDR : EDIT/ DEL : REPLY ]
  20. BlogIcon 미쉘린

    하핫 좋은 정보 고마워요 ^^ 제 블로그에도 달았어요 ~

    2008/06/26 09:43 [ ADDR : EDIT/ DEL : REPLY ]
  21. 학생

    경로를 쓰는데 ./images 같이 안쓰고 절대경로로 쓰면 작동이 안되네요ㅋ
    좋은자료 감사합니다^^

    2008/06/28 20:36 [ ADDR : EDIT/ DEL : REPLY ]
  22. BlogIcon 이성주

    좋은 정보 보고갑니다.
    JSP가 없는게 좀 아쉽네요.

    2008/07/03 10:23 [ ADDR : EDIT/ DEL : REPLY ]
    • BlogIcon 듬직이

      좀 아쉽네요 ^^;
      우선 코드가 우선시 되면 java로 해 놓고 사용하면 괜찮지 않을까 싶기도 하네요 ^^;

      2008/07/04 09:30 [ ADDR : EDIT/ DEL ]
    • BlogIcon 이성주

      하긴.. 모델2로 개발을 많이하니 jsp 코드가 그렇게 굳이 필요는 안하겠네요

      2008/07/04 10:33 [ ADDR : EDIT/ DEL ]
  23. BlogIcon 하늬아빠

    좋은 정보내요.
    담아갈께요^^

    2008/08/14 09:20 [ ADDR : EDIT/ DEL : REPLY ]
  24. BlogIcon jm2y

    그대로 따라하니까 잘 되네요~
    감사합니다.

    2008/09/22 19:43 [ ADDR : EDIT/ DEL : REPLY ]
  25. BlogIcon HeatHaze

    좋은내용 잘 봤습니다^^ 감사해요

    2008/11/21 00:37 [ ADDR : EDIT/ DEL : REPLY ]
  26. BlogIcon bluesil

    그 동안 답답했는데, 잘 사용하겠습니다. :)

    2008/12/13 01:13 [ ADDR : EDIT/ DEL : REPLY ]
  27. BlogIcon 세잎클로버,,

    자세한 설명 정말 감사해요~ ^^
    그대로 따라해서 설치하긴 했는데 코드가 약간 밀려서 나오네요;ㅁ;
    왜 그런지 이유를 모르겠어요..흑..
    해결할 수 있는 방법이 없을까요?ㅠ

    2009/01/02 03:12 [ ADDR : EDIT/ DEL : REPLY ]
  28. BlogIcon Jake

    방금 내용 보고 적용했습니다.

    본 내용좀 제 블러그에 이용해도 될까요? 개인적으로 소장 해두고 싶습니다.
    내용참조에 관한 내용은 글에 꼭 입력하겠습니다.

    2009/01/09 23:20 [ ADDR : EDIT/ DEL : REPLY ]
  29. BlogIcon Jake

    저녁내내 글을 쓰고 혹시나 보셨을까 하여 먼저 공개로 돌려 뒀는데.... 문제가 된다면 개인적으로 소장 하겠습니다. 물론 늦었지만 허락을 해주신다면 감사하겠습니다ㅡㅡ;

    2009/01/11 00:35 [ ADDR : EDIT/ DEL : REPLY ]
  30. 지나가는

    블로그에 SyntaxHighlighter를 설치했는데요
    설치하고 보니 메뉴나 달력의 폰트 크기가 커지더군요; 어떻게 수정해야 할지 난감해서
    도움을 구하고자 합니다. 답변 주시면 감사하겠습니다.

    2009/01/18 17:32 [ ADDR : EDIT/ DEL : REPLY ]
    • BlogIcon 듬직이

      도움을 드릴려고 했는데 ^^;;
      홈페이지가 링크되어 있지 않네요..

      2009/01/22 17:29 [ ADDR : EDIT/ DEL ]
  31. BlogIcon kimgisa

    너무너무 유용한 정보 감사합니다. 블로그에 적용했더니 너무 이쁘네요^^;;
    일찍 알았다면 색상을 일일이 바꾸는 삽질 안했어도 되었는데ㅜㅜ;;
    새해 福 많이 받으세요.~

    2009/01/18 20:52 [ ADDR : EDIT/ DEL : REPLY ]
    • BlogIcon 듬직이

      감사합니다. 잘 쓰신다니.. 기쁘네요..
      새해 복 많이 받으세요.

      2009/01/22 17:29 [ ADDR : EDIT/ DEL ]
  32. BlogIcon leanu

    감사합니다. ^^ 소스 찾다가 저 툴을 어떻게 설치하는걸까 맨날 고민하다가 단박에 해결되는거 같아 기분이 좋습니다.

    2009/02/11 13:52 [ ADDR : EDIT/ DEL : REPLY ]
  33. BlogIcon 성게군+_+

    저는 syntaxhighlighter_2.0.287 로 설치했는데요
    위 방법대로 해봤는데 안되네요 ㅜㅜ

    <textarea name="code" class="c#" cols="60" rows="10">
    ... some code here ...
    </textarea>

    위 태그로 html 모드에서 코드를 넣었더니 그냥 텍스트 박스안에 복잡한 코드만 들어가더라구요;

    2009/02/20 17:24 [ ADDR : EDIT/ DEL : REPLY ]

  34. 비밀댓글 입니다

    2009/03/05 17:28 [ ADDR : EDIT/ DEL : REPLY ]
  35. BlogIcon 연월태생

    올려주신 글 잘보았습니다. 덕분에 참조도 많이 있구요^^
    그런데 제 블러그에서 사용이 안되네요
    한번 방문해 주셔서 이상이 있는 부분 알려 주시면 대단히 감사하겠습니다.
    그럼 수고하세요

    2009/03/10 13:32 [ ADDR : EDIT/ DEL : REPLY ]
    • BlogIcon 신규하

      script 부분을 스킨의 </body>태그 아래에 넣어 보세요.
      그러면 동작 할 꺼 같습니다.

      2009/03/10 17:19 [ ADDR : EDIT/ DEL ]
  36. BlogIcon 연월태생

    감사합니다.
    덕분에 해결 되었네요 ^^
    즐거운 하루 되세요 ^^

    2009/03/11 09:01 [ ADDR : EDIT/ DEL : REPLY ]
  37. BlogIcon 말아톤

    감솨합니다.. 잘쓰겠습니다!^_^

    2009/04/19 11:07 [ ADDR : EDIT/ DEL : REPLY ]
  38. BlogIcon lahuman

    좋은글 감사합니다. 잘 쓰겠습니다.

    2009/06/22 17:58 [ ADDR : EDIT/ DEL : REPLY ]
  39. seppin

    좋은 정보 감사해요~

    2009/06/24 17:10 [ ADDR : EDIT/ DEL : REPLY ]