티스토리에 프로그램 소스코드 테마적용하기 - SyntaxHighlighter





티스토리 블로그에 프로그램 소스코드를 작성하면 일반적인 텍스트 방식으로 표현되기에 가독성이 떨어진다.

프로그램 소스코드를 좀 더 읽기 쉽게 표현해주는 SyntaxHighlighter 를 티스토리 블로그에 적용하는 방법에 대해 알아보자.



1. 다운로드

  • 다운로드 주소 : http://alexgorbatchev.com/SyntaxHighlighter/download/
  • 다운로드 주소로 접속하여 "Click here to download" 를 클릭하면 최신 버전으로 다운로드 된다. (v3.0.83)
  • 다운로드된 syntaxhighlighter_3.0.83.zip 파일을 압축해제한다.
  • 압축해제하면 아래 그림처럼 파일구성을 하고 있다. 이 중 "scripts"와 "styles"를 티스토리에 업로드 해야한다.




2. 티스토리에 파일 업로드

  • 티스토리 관리자 모드로 로그인한다.
  • " 꾸미기 > HTML/CSS 편집 " 메뉴로 이동하여 "파일 업로드" 탭을 클릭하면 위 화면을 볼 수 있다.
  • "추가" 버튼을 클릭하여 다운로드 받았던 "styles"와 "scripts" 폴더안의 파일을 모두 업로드한다.

3. 업로드한 파일을 스킨에 적용하기
    • " 꾸미기 > HTML/CSS 편집 " 메뉴의 "HTML/CSS" 탭으로 이동한다.
    • "skin.html" 에서 "</body>" 바로 위에 아래 스크립트를 입력한다. (Ctrl + F 로 </body>를 검색한다.)

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    • 스크립트를 입력한 화면

    • Default 테마 외에 다른 테마를 적용하고 싶으면 shCore.css 와 shThemeDefault.css 파일명을 변경하면 된다.

    4. SyntaxHighlighter를 이용하여 소스코드 입력하기
    • 글쓰기 화면에서 HTML 체크박스를 선택하면 HTML 입력화면으로 변경된다.


    • SyntaxHighlighter를 이용하려면 아래 형식으로 작성해야 한다.
    형식)
    <pre class="brush:브러시이름">
    소스코드 입력
    </pre>

    예제) javascript 소스코드
    <pre class="brush:html">
    <script type="text/javascript" src="./images/shCore.js"></script>
    <script type="text/javascript" src="./images/shLegacy.js"></script>
    <script type="text/javascript" src="./images/shBrushBash.js"></script>
    <script type="text/javascript" src="./images/shBrushCpp.js"></script>
    <script type="text/javascript" src="./images/shBrushCSharp.js"></script>
    <script type="text/javascript" src="./images/shBrushCss.js"></script>
    <script type="text/javascript" src="./images/shBrushDelphi.js"></script>
    <script type="text/javascript" src="./images/shBrushDiff.js"></script>
    <script type="text/javascript" src="./images/shBrushGroovy.js"></script>
    <script type="text/javascript" src="./images/shBrushJava.js"></script>
    <script type="text/javascript" src="./images/shBrushJScript.js"></script>
    <script type="text/javascript" src="./images/shBrushPhp.js"></script>
    <script type="text/javascript" src="./images/shBrushPython.js"></script>
    <script type="text/javascript" src="./images/shBrushSql.js"></script>
    <script type="text/javascript" src="./images/shBrushXml.js"></script>
    <script type="text/javascript" src="./images/shBrushVb.js"></script>
    <link rel="stylesheet" type="text/css" href="./images/shCore.css">
    <link rel="stylesheet" type="text/css" href="./images/shThemeDefault.css">
    <script type="text/javascript">
    SyntaxHighlighter.all();
    </script>
    </pre>

    결과) Emacs 테마로 적용된 모습을 볼 수 있다.