블로그에 Syntax Highlighter 설치하기

개발자가 블로그를 운영하다보면 Vim이나 Eclipse(또는 영광의 Visual Studio)에서 지원하는 문법강조(Syntax highlight) 기능을 쓰고 싶어 미칠 것이다.

몇몇 블로그 서비스는 정식 플러그인을 통해 지원하지만, 대부분 블로그는 전혀 지원하지 않고 있다.

그! 러! 나!

블로그 템플릿(또는 테마?)을 수정할 수 있다면, 자바 스크립트로 만들어진 Syntax Highlighter를 사용할 수 있다.

설치는 간단하다.

1. </head> 태그 바로 위에 아래 내용을 삽입한다.

   <!-- 문법강조시작 -->
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>       
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
   
   <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
   <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
   <!-- 문법강조끝 -->

2. </html> 태그 바로 위에 아래 내용을 삽입한다.

   <script type='text/javascript'>
        SyntaxHighlighter.all()
   </script> 

자, 이제 테마를 저장하고, 실제 사용법을 알아보자.

참조: http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

위 링크에 가보면 두 가지 방법을 제시한다.

1. <pre> 태그
   class 속성에 "brush: [언어]"를 추가하는 형식이다.
   단점은 꺽쇠(<, >)를 모두 HTML 인코딩 해야하는 것인데, 보통 블로그 편집기는 이 과정을 자동으로 해준다.
2. <script> 태그
   type 속성은 syntaxhighlighter, class 속성은 "brush: [언어]", <script> 태그 사이에는 <![CDATA[ /* 소스 */ ]]> 형태로 넣는 것인데,
   장점은 꺽쇠에 대해 HTML인코딩을 하지 않아도 되는 점.
   단점은 1. 대부분 RSS리더는 <script>태그를 건너 뛴다는 점과, 2. </script> 태그로 닫는걸 깜빡한다면 대참사가 일어난다는 점이다.

그래서 공식 홈페이지에선 블로그에서 사용할 때는 <pre> 태그 방식을 권하고 있다.