관리 메뉴

I LOVE EJ

[유틸]Syntaxhighlighter를 티스토리에 설치하다. 본문

Hobby/컴퓨터 관련지식

[유틸]Syntaxhighlighter를 티스토리에 설치하다.

BeOne 2008. 11. 29. 09:27
1. 뭐냐?
페이지에 소스코드를 넣으거 불편하셨죠? 아래와 같이 색상이나 구문 강조를 해주는 웹유틸정도
  1. #include <stdio.h> 
  2.  
  3. int main()  
  4. {  
  5.     printf("Hello C~\n");  
  6. }  


2. 구하기
http://code.google.com/p/syntaxhighlighter/로 가시면 구할 수 있음.
아니면 직접 받으세요.
3. 설치
세개의 폴더가 나오는데 Scripts, Styles안에 파일을
테스토리 관리자 모드로 로긴 후 스킨 탭 HTML/CSS편집으로 들어가 몽땅 업로드한다.
skin.html파일의 link로 시작하는 부분에 아래줄을 추가해준다.
  1. <link type="text/css" rel="stylesheet" href="./images/SyntaxHighlighter.  
  2. css"></link> 
그리고 </body>위에다 다음의 문장을 복사해준다.
  1. <script class="javascript" src="./images/shCore.js"></script> 
  2. <script class="javascript" src="./images/shBrushCSharp.js"></script> 
  3. <script class="javascript" src="./images/shBrushCpp.js"></script> 
  4. <script class="javascript" src="./images/shBrushCss.js"></script> 
  5. <script class="javascript" src="./images/shBrushDelphi.js"></script> 
  6. <script class="javascript" src="./images/shBrushJScript.js"></script> 
  7. <script class="javascript" src="./images/shBrushJava.js"></script> 
  8. <script class="javascript" src="./images/shBrushPhp.js"></script> 
  9. <script class="javascript" src="./images/shBrushPython.js"></script> 
  10. <script class="javascript" src="./images/shBrushRuby.js"></script> 
  11. <script class="javascript" src="./images/shBrushSql.js"></script> 
  12. <script class="javascript" src="./images/shBrushVb.js"></script> 
  13. <script class="javascript" src="./images/shBrushXml.js"></script> 
  14. <script class="javascript"> 
  15. dp.SyntaxHighlighter.ClipboardSwf = './images/clipboard.swf';    
  16. dp.SyntaxHighlighter.HighlightAll('code');  
  17. </script> 

이로써 설치는 끝났구..

4. 사용
아래와 같이 언어 코드를 넣어주면 된다.
  1. <textarea name="code" class="c#" cols="60" rows="10">  
  2. ... some code here ...  
  3. <textarea>