티스토리에 SyntaxHighlighter 설치하기

전에도 한번 올렸던 포스트 였는데, 다시 정리해야 될것 같아서 정리 합니다.

브라우져에서 java, javascript 소스 를 개발 에디터처럼 볼수 있게 해주는 툴입니다.

원 사이트에서 syntaxhighlighter 를 설치하는 스크립트 example

 


 



 

function foo()
{
}

 

아래와 같이 화면에 출력 됩니다.

    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }

1.  다운로드  http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html 

-------------- TISTORY 에서 설치하기 -------------

2.  TISTORY HTML/CSS 편집

   2-1 : 다운로드된 Syntaxhighlighter 리소스를 자신의  tistory images 폴더에 추가 합니다.

3. Finally    HTML/CSS 편집기 안에  </body> 태그 이하에 아랴와 같은 코드를 추가 합니다.

TISTORY 포스트 입력시 우측 html 버튼을 눌러 HTML 모드로 변경후 원하는 곳에 아래와 같이 PRE TAG 를 삽입하고 class 에 "brush: ???" 로 설정 해 주면 END

    
   
     ... 여기에 원하는 소스코드를 표시 해 줍니다.