블로그에서 소스코드를 가독성있게 출력하는 방법. SyntaxHighlighter

저의 경우 블로그에 간략한 예제에 대한 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;
}