SyntaxHighlighter 사용방법

작성자 : shin-gosoo(hchshin@chol.com)
작성일 : 2007.04.06

새창 보기

자바스크립트를 통해 각종 프로그래밍언어(java,php,css,sql,c# 등) 코드를 보기 좋게 보여주는 SyntaxHighlighter 사용방법입니다.

1. 설치방법

- http://www.dreamprojections.com/syntaxhighlighter/ 에서 최신 라이브러리 다운로드
   - 압축 해제 후 적당한 위치에 script 파일과 css 파일 배치
   - script 파일이 14개정도 되는데, 제일 핵심인 shCore.js 파일과 자기가 사용하는 언어만 카피해두 됨
     (본인의 경우 shBrushCss.js, shBrushJScript.js, shBrushJava.js, 
     shBrushPhp.js, shBrushSql.js, shBrushXml.js 만 사용함)
     shCore.uncompressed.js 파일은 소스 분석시만 사용할 것. 
   - 설치 끝.. ㅡ.ㅡ (넘 쉽나?)

2. 사용방법
  
  - User Guide(http://www.dreamprojections.com/syntaxhighlighter/Usage.aspx) 보면 됨.
  
  - 위 사이트 접속 불가나 귀차니스트는 아래를 볼 것.
  
  - [간단한 사용 예] 를 보면,
    1, 2 라인처럼  다운 받은 SyntaxHighlighter.css 적용
    4라인 textarea 의 name을 "code"라고 명하고 크기는 적당히 지정하면 됨(나중에 자동으로 조절됨)
    class="xml:nogutter:nocontrols" 이부분이 중요한데,
    단순히 class="xml" 라고 하면 기본속성으로 xml 문장을 구문강조하겠다는 의미.
    기본 속성은 상단의 메뉴(Control) 와 좌측의 라인번호가 기본적으로 표시됨.
    class="xml:nogutter:nocontrols" 은 xml 구문강조에다가 nogutter(라인번호 표시 감춤),
    nocontrols(상담 메뉴 감춤) 을 의미함
     
    그 밖에 collapse(소스 숨김), firstline[num](라인번호 시작번호), showcolumns 등이 있음

한번에 여러개의 textarea를 써둬 됨.(단 name="code"와 같이 이름을 통일시켜야 함.)

마지막으로 15~19라인과 같이 필요한 스크립트를 지정하면 됨.

18라인의 dp.SyntaxHighlighter.HighlightAll('code'); 에서 code는 당연히 textarea의 name임.

- 지원언어 : CLASS 명 : js 파일명
    C# : c# : shBrushCSharp.js
    CSS : css : shBrushCss.js
    C++ : c : shBrushCpp.js
    Delphi : delphi : shBrushDelphi.js
    Java : java : shBrushJava.js
    JavaScript : js : shBrushJScript.js
    PHP : php : shBrushPhp.js
    Python : python : shBrushPython.js
    Ruby : ruby : shBrushRuby.js
    SQL : sql : shBrushSql.js
    Visual Basic : vb : shBrushVb.js
    XML/HTML : xml : shBrushXml.js

3. 참고 사항

- 설치형 블로그 중 태터툴즈에만 테스트해 봤음.
  - 테터에서 글쓰기 모드를 위지윅으로 하지 말고 HTML 소스편집을 기본 설정후에 사용하면 편리함.

- 위드프레스는 기본적으로 script를 넣을 수 없어서 별도의 플러그인 없이는 사용할 수 없는 걸로 보임.

[간단한 사용 예]