Blogspot에 Code Syntax Highlight 설정

아무래도 직업이 개발자이다 보니 블러그에서도 코드를 많이 다루게 됩니다. 블러그를 선정할때도 코드를 깔끔하게 편집할 수 있는 기능이나 설정을 가장 먼저 고려하게 됩니다.

Blogspot에 JavaScript를 기반으로하는 Code Syntax Highlight 기능을 추가할 수 있습니다.

http://code.google.com/p/syntaxhighlighter/ 에서 진행되고 있는 syntaxhighlighter 프로젝트는 구글 프로젝트로 시작된 오픈소스 프로젝트 입니다. 프로젝트 정보는 다음 URL에서 찾을 수 있습니다.

• http://alexgorbatchev.com/SyntaxHighlighter/
• http://code.google.com/p/syntaxhighlighter/

1.5 버전까지는 구글 프로젝트로 진행되었고 그 이후는 alexgorbatchev.com에서 진행되고 있습니다. 현재 개발 최신 버전은 3.0.83 이고 안전화 버전은 2.1.382입니다.

syntaxhighlighter의 최종 산출물은 자바스크립트 파일, CSS 파일, SWF 파일로 구성됩니다. 설치 절차는 크게 두 단계로 구성됩니다.

1. syntaxhighlighter의 구성 파일을 호스팅 서버에 올리기
2. blogspot의 템플릿 수정

syntaxhighlighter의 구성 파일을 호스팅 서버에 올리기

blogspot은 별도의 파일을 호스팅 서버에 올리는 것이 불가능 합니다. 그러나 syntaxhighlighter를 정상적으로 설치하기 위해서는 주요 구성 파일을 서버에 올리고 url로 접근가능 할 수 있어야 합니다. 주요 구성 파일을 서버에 올리기 어려울 경우를 대비해서 alexgorbatchev.com에서는 주요 구성 파일의 호스팅 서비스를 제공합니다. alexgorbatchev.com에서 서비스하는 버전 별 url은 다음과 같습니다.

http://alexgorbatchev.com/pub/sh/1.5.1/
http://alexgorbatchev.com/pub/sh/2.0.278/
http://alexgorbatchev.com/pub/sh/2.0.287/
http://alexgorbatchev.com/pub/sh/2.0.296/
http://alexgorbatchev.com/pub/sh/2.0.320/
http://alexgorbatchev.com/pub/sh/2.1.364/
http://alexgorbatchev.com/pub/sh/2.1.364/
http://alexgorbatchev.com/pub/sh/2.1.382/
http://alexgorbatchev.com/pub/sh/current/

각 버전은 다음과 같은 구성 파일을 서비스 합니다.

/styles
    /styles/shThemeRDark.css
    /styles/shThemeMidnight.css
    /styles/shThemeMDUltra.css
    /styles/shThemeFadeToGrey.css
    /styles/shThemeEmacs.css
    /styles/shThemeEclipse.css
    /styles/shThemeDjango.css
    /styles/shThemeDefault.css
    /styles/shCoreRDark.css
    /styles/shCoreMidnight.css
    /styles/shCoreMDUltra.css
    /styles/shCoreFadeToGrey.css
    /styles/shCoreEmacs.css
    /styles/shCoreEclipse.css
    /styles/shCoreDjango.css
    /styles/shCoreDefault.css
    /styles/shCore.css
  /scripts
    /scripts/shLegacy.js
    /scripts/shCore.js
    /scripts/shBrushXml.js
    /scripts/shBrushVb.js
    /scripts/shBrushSql.js
    /scripts/shBrushScala.js
    /scripts/shBrushSass.js
    /scripts/shBrushRuby.js
    /scripts/shBrushPython.js
    /scripts/shBrushPowerShell.js
    /scripts/shBrushPlain.js
    /scripts/shBrushPhp.js
    /scripts/shBrushPerl.js
    /scripts/shBrushJScript.js
    /scripts/shBrushJavaFX.js
    /scripts/shBrushJava.js
    /scripts/shBrushGroovy.js
    /scripts/shBrushErlang.js
    /scripts/shBrushDiff.js
    /scripts/shBrushDelphi.js
    /scripts/shBrushCss.js
    /scripts/shBrushCSharp.js
    /scripts/shBrushCpp.js
    /scripts/shBrushColdFusion.js
    /scripts/shBrushBash.js
    /scripts/shBrushAS3.js
    /scripts/shBrushAppleScript.js
    /scripts/shAutoloader.js

이렇게 호스팅 되는 파일을 이용하여 블러그 설정이 가능합니다.

blogspot의 템플릿 수정

위와 같이 alexgorbatchev.com에서 호스팅하는 파일을 사용하거나 혹은 특정 서버에 배포하여 URL로 모든 구성자원이 접근가능하다면 블러그 템플릿 설정이 가능합니다.

blogspot의 템플릿 수정은 </b:skin>와 </head>테그 사이에 다음을 추가하면 됩니다.

<link href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeEclipse.css" rel="stylesheet" type="text/css" />

Code highlight의 CSS 테마와 관련해서는 아래 URL을 참조하기 바랍니다. CSS 테마는 css 파일로 관리되며 필요한 css Themes는 link 설정에서 변경하면 됩니다.

http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/default.html

이제 모든 설정은 완료된 상태이며 이제 블러그 포스팅시 Code를 적어주는 방법을 살펴보겠습니다.

SyntaxHighlighter 문법

기본 문법은 다음과 같습니다.

...

기본 brush 메핑은 다음 페이지를 참조하시기 바랍니다.

• http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

대표적인 brush 설정 방법은 다음과 같습니다.

<pre class="brush:javascript"> ---- </pre>
<pre class="brush:jscript> ---- </pre>
<pre class="brush:js"> ---- </pre>
<pre class="brush:css"> ---- </pre>
<pre class="brush:html"> ---- </pre>