코드 하이라이트(Syntax Highlighter)를 티스토리(Tistory)에 적용하기

히즈웨드 |

     웹 사이트를 돌아다니다보면, 포스트 중에 프로그래밍 코드를 읽기 쉽게 보여주는 뷰어를 제공한다. 바로 Syntax Highlighter를 사용한 것이다. 우리나라에서는 코드 하이라이트라고 더 많이 알려져있다. 코드 하이라이트는 오픈소스 라이센스(L-GPL)를 따르기 때문에 누구나 사용할 수 있다.






    1. 코드 하이라이트(Syntax Highlighter) 다운로드

    • 다운로드 : 




    2. 코드 하이라이트(Syntax Highlighter) 업로드
    • 다운로드 받은 파일의 압축을 풀면 나오는 폴더 중 다른 것들은 무시하고 scripts 폴더와 styles 폴더의 파일만 업로드하면 된다. 티스토리의 경우 자동으로 images/ 폴더에 업로드 될것이다.

    • 코어 필수 파일 : scripts/shCore.js
    • 언어 선택 파일 : scripts/shBrush*.js
      • 사용할 언어를 복수개 선택해야한다. 업로드는 다 해두고, 사용할 언어만 선택하면 된다.
    • 스타일 선택 파일 : styles/shCore*.css
      • 스타일을 하나 선택해야한다. 업로드는 다 해두고, 스크립트에서 하나를 선택하면 된다.
    • 테마 선택 파일 : styles/shTheme*.css
      • 테마를 하나 선택해야한다. 업로드는 다 해두고, 스크립트에서 하나를 선택하면 된다.





    3. 코드 하이라이트(Syntax Highlighter) 설정

    • head 태그 사이 title 위에 아래 태그를 넣는다.
    • 필자는 언어 JS파일을 다섯개 설정하였다. 모든 언어를 설정해둘 수도 있지만, 웹페이지 용량만 커지기 때문에 사용할 언어만 설정하는 것이 좋다.
    • 스타일과 테마는 Default로 설정하였다. 각자 스타일과 테마를 테스트해보며, 원하는 스타일을 찾으면 되겠다.
    
    
     
     
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    • 크롬 브라우저를 위해 css 파일에 다음 구문을 추가한다. 필자는 글씨 크기를 조금 줄였다.
    div .syntaxhighlighter { 
        overflow-y: hidden!important; overflow-x: auto!important;
        font-size:0.9em !important;
    }
    




    4. 코드 하이라이트(Syntax Highlighter) 사용하기

    • 코드 하이라이트를 사용하기 위해서는 편집 화면 오른쪽위에 HTML 편집으로 전환해야 한다. 그리고 pre 태그의 class 속성에 "brush:브러쉬명"을 입력하고, pre 태그 안쪽에 코드를 입력하면 된다.
     
    
       코드 기입~!
    
    



    • 언어 JS파일과 브러쉬명은 아래와 같다.
    언어[브러쉬명]파일명
    ActionScript3as3, actionscript3shBrushAS3.js
    Bash/shellbash, shellshBrushBash.js
    ColdFusioncf, coldfusionshBrushColdFusion.js
    C#c-sharp, csharpshBrushCSharp.js
    C++cpp, cshBrushCpp.js
    CSScssshBrushCss.js
    Delphidelphi, pas, pascalshBrushDelphi.js
    Diffdiff, patchshBrushDiff.js
    Erlangerl, erlangshBrushErlang.js
    GroovygroovyshBrushGroovy.js
    JavaScriptjs, jscript, javascriptshBrushJScript.js
    JavajavashBrushJava.js
    JavaFXjfx, javafxshBrushJavaFX.js
    Perlperl, plshBrushPerl.js
    PHPphpshBrushPhp.js
    Plain Textplain, textshBrushPlain.js
    PowerShellps, powershellshBrushPowerShell.js
    Pythonpy, pythonshBrushPython.js
    Rubyrails, ror, rubyshBrushRuby.js
    ScalascalashBrushScala.js
    SQLsqlshBrushSql.js
    Visual Basicvb, vbnetshBrushVb.js
    XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js
    (출처 : http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/)