ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 블로그에서 소스코드를 가독성있게 출력하는 방법. SyntaxHighlighter
    2011. 11. 2. 1 comments


    저의 경우 블로그에 간략한 예제에 대한 C 소스코드와 shell 스크립트의 내용들을 포스팅 내용에 간간히 포함시키곤 한다. 그럴 때 마다  HTML 수정에서 직접 <pre> 태그를 주어서 하나의 문단으로 묶어주고 가독성을 위해 앞뒤 글과의 차이를 두고 재확인하는 작업을 했었다.

    자료를 찾아보니 많은 사람들이 적용한 SyntaxHighlighter라는 프로그램을 찾았다.


    http://alexgorbatchev.com/SyntaxHighlighter/


     SyntaxHighlighter는 자바 스크립트를 통해 <pre> 태그 안에 약속된 아이디(class)에 어떤 소스코드인지를 명시해두면 소스코드 작성 편집기에서 표현해주는 퀄리티의 소스 코드를 웹에서 확인할 수 있다. 위의 이미지에서 Demo 부분처럼 말이다.

      
    자 그렇다면, 이제 설치방법에 대해서 알아보자. 
    티스토리를 사용하기 때문에 티스토리 기준으로 설명을 한다. 개인 설치형 블로그를 사용하신다면 웹사이트의 install 가이드를 그대로 사용해도 된다.

    1) 웹사이트에 가서 syntaxhighlighter파일을 다운로드를 받는다.
    2) 파일압축을 푼 후, 관리자 화면 -> HTML/CSS 편집기의 파일 업로드화면에서  scripts와 style 디렉토리의 모든 파일을 업로드한다.
    3) 관리자 화면 -> HTML/CSS 편집기에서 필요한 script를 삽입한다.

    아래의 코드를 </head> 전에 추가.

    <link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css">
    


    그리고 아래의 코드를 </body> 바로 위에 있는 </s_t3> 위에 추가.

    <!-- Start SyntaxHighlighter -->
    <script type="text/javascript" src="./images/shCore.js"></script>
    <script type="text/javascript" src="./images/shAutoloader.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    SyntaxHighlighter.autoloader(
      'applescript            ./images/shBrushAppleScript.js',
      'actionscript3 as3      ./images/shBrushAS3.js',
      'bash shell             ./images/shBrushBash.js',
      'coldfusion cf          ./images/shBrushColdFusion.js',
      'cpp c                  ./images/shBrushCpp.js',
      'c# c-sharp csharp      ./images/shBrushCSharp.js',
      'css                    ./images/shBrushCss.js',
      'delphi pascal          ./images/shBrushDelphi.js',
      'diff patch pas         ./images/shBrushDiff.js',
      'erl erlang             ./images/shBrushErlang.js',
      'groovy                 ./images/shBrushGroovy.js',
      'java                   ./images/shBrushJava.js',
      'jfx javafx             ./images/shBrushJavaFX.js',
      'js jscript javascript  ./images/shBrushJScript.js',
      'perl pl                ./images/shBrushPerl.js',
      'php                    ./images/shBrushPhp.js',
      'text plain             ./images/shBrushPlain.js',
      'py python              ./images/shBrushPython.js',
      'ruby rails ror rb      ./images/shBrushRuby.js',
      'sass scss              ./images/shBrushSass.js',
      'scala                  ./images/shBrushScala.js',
      'sql                    ./images/shBrushSql.js',
      'vb vbnet               ./images/shBrushVb.js',
      'xml xhtml xslt html    ./images/shBrushXml.js'
    );
        SyntaxHighlighter.all();
    //]]>   
    </script>
    <!-- END SyntaxHighlighter -->
    



    그럼 이번에 적용해보자. 다음과 같은 글을 블로그에 HTML 태그 편집기에서 작성한다.

    <pre class="brush:c">
    #include <stdio.h> int main() { return 0; } </pre>


    실제로 웹페이지가 로딩하면 아래와 같은 결과를 얻을 수 있다.

    #include <stdio.h>
    int main()
    {
       return 0;
    }
    


    반응형

    댓글 1

Designed by Tistory.