티스토리에 소스코드 깔끔하게 올리기(SyntaxHighlighter 적용하기)

티스토리에 자료를 업로드 하면서 코드를 올리는 경우가 종종 있습니다.

나름 깔끔하게 올리기 위해 코드 화면을 캡쳐해서 이미지로 올리고 있었는데,

아무래도 코드 참조하기 힘든거 같아 방법을 찾아보던 중 SyntaxHighlighter를 알게 되어

제 블로그에도 적용해 봤습니다.

버전별로 적용하는 방법이 조금 차이가 있는거 같긴한데 전 최신버전(3.0.83)을 설치했습니다.

먼저, 해당 사이트(http://alexgorbatchev.com/SyntaxHighlighter/)에서 파일을 다운로드 받습니다.

다운로드 받은 파일은 다음과 같은 구성을 가집니다. 이 중에 scripts, styles 폴더의 파일들을 사용하게 됩니다.

파일이 준비 되었으니 티스토리 구성을 수정해보겠습니다.

관리자 로그인 후 좌측 메뉴에서 '꾸미기-HTML/CSS 편집'을 선택합니다.

그리고 우측 화면에서 '파일업로드'를 선택합니다.

기본적으로 업로드 해야할 파일은 scipts/shCore.js, styles/shCore.css, styles/shThemeDefault.css 파일이고,

사용하는 소스코드 종류에 따라 Brush를 추가 업로드 해주면 됩니다.

예를 들어 자바 소스코드를 사용하기 위해서는 scripts/shBrushJava.js,

자바스크립트를 사용하기 위해서는 scripts/shBrushJScript.js Brush를 추가하면 됩니다.

업로드가 끝나면 HTML/CSS 탭을 선택해 다음 코드를 추가합니다.

위의 코드가 SyntaxHighlighter를 적용한 코드입니다.

코드 추가를 끝으로 티스토리 설정은 모두 끝났습니다.

그럼 마지막으로 블로그에서 사용법을 알아보겠습니다.

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

블로그 포스팅시 HTML 체크를 해주시고

위와 같이 태그에 class를 지정해주면 깔끔한 소스코드를 볼 수 있습니다.

class에 지정하는 brush는 위에서 추가한 파일 중 선택하시면 됩니다.

** 추가적인 사항은 사이트(http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html)를 참고하셔도 됩니다.