ABOUT ME

-

Today
-
Yesterday
-
Total
-

  • SyntaxHighlighter 적용해서 소스코드 깔끔하게 보기
    프로그래밍 2014.08.22 17:45

    SyntaxHighlighter를 이용하면 소스 코드를 블로그에 올릴때 깔끔하고 보기 좋게 올릴 수 있습니다.

    설치와 사용은 꽤 간단합니다.


    다운로드

    SyntaxHighlighter 홈페이지


    업로드

    압축을 풀면 나오는 scripts, styles 폴더에 있는 파일들을 업로드합니다.

    모든 파일을 다 넣을 필요는 없으며, 본인이 필요한 것만 넣으면 됩니다.


    script/css 추가

    아래 내용을 <head></head> 사이에 넣습니다.

    물론 조금전에 업로드한 .js, .css파일에 따라 아래 내용은 달라져야겠죠?


    <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/shBrushPlain.js"></script>
    <script type="text/javascript" src="./images/shBrushPython.js"></script>
    <script type="text/javascript" src="./images/shBrushRuby.js"></script>
    <script type="text/javascript" src="./images/shBrushScala.js"></script>
    <script type="text/javascript" src="./images/shBrushSql.js"></script>
    <script type="text/javascript" src="./images/shBrushVb.js"></script>
    <script type="text/javascript" src="./images/shBrushXml.js"></script>
    <link type="text/css" rel="stylesheet" href="./images/shCore.css">
    <link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">
    
    <script type="text/javascript">
    SyntaxHighlighter.all();
    </script>
    


    html 수정

    <body>태그를 찾아 아래와 같이 변경.

    <body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
    


    적용

    저 같은 경우는 <pre>태그를 이용하는데 <textarea>를 이용하는 분들도 있더라구요.

    <pre class="brush:language">Hello World</pre>

    brush:language에는 적용할 언어를 넣어줍니다.


    지금까지 SyntaxHighlighter를 이용해서 티스토리 블로그에 소스코드를 깔끔하게 올리는 방법을 알아봤습니다.


    텍스트로 정리하는것 보단 훨씬 가독성이 좋아졌네요!

    댓글 0

Designed by Tistory.