본문 바로가기

블로그에 SyntaxHighlighter를 이용해서 소스 코드를 넣어보자.

프로그래밍과 관련된 포스팅을 하다보면 소스 코드를 넣는 경우가 많다.
이럴 때 그냥 다른 글과 똑같이 소스 코드를 적어 넣으면 다른 글과 구별되지 않을 뿐더러 별로 이쁘지도 않다.
그래서 오늘은 SyntaxHighlighter를 이용해서 블로그에 소스코드를 넣는 방법을 알아보려고 한다.
(티스토리를 기준으로 설명할 것이다.)

먼저 http://alexgorbatchev.com/wiki/SyntaxHighlighter 로 가서 SyntaxHighlighter를 다운받자.
다운 받은 압축파일을 풀면 3개의 폴더가 있을텐데 거기에서 필요한 폴더는 scripts와 styles폴더이다.

자신의 블로그의 파일 업로드 기능을 이용해서 scripts폴더와 styles폴더 안의 파일들을 모두 업로드한다.

업로드가 완료되었다면 이제 skin.html파일을 수정해야한다.
css파일을 로드하는 부분의 코드 바로 뒤에 다음 코드를 삽입해 주자.

<link type = "text/css" rel = "stylesheet" href = "./images/shCore.css"/>
<link type="text/css" rel="stylesheet" href="./images/shThemeEclipse.css">
<script language="javascript" src="./images/shCore.js">< /script>
<script language="javascript" src="./images/shBrushCSharp.js">< /script>
<script language="javascript" src="./images/shBrushXml.js">< /script>
<script language="javascript" src="./images/shBrushCss.js">< /script>
<script language="javascript" src="./images/shBrushCpp.js">< /script>
<script language="javascript" src="./images/shBrushJava.js">< /script>
<script language="javascript" src="./images/shBrushJScript.js">< /script>
<script language="javascript" src="./images/shBrushPhp.js">< /script>
<script language="javascript" src="./images/shBrushAS3.js">< /script>
<script language="javascript">
SyntaxHighlighter.all();
</script>

이 부분은 css와 자바스크립트로 나눠서 설명을 하겠다.
먼저 css를 보면 기본적으로 shCore.css는 포함해야 한다. 그리고 하나 더 테마 css파일이 필요한데, shTheme으로 시작하는 css파일들이다. 이 중 하나를 선택해서 적으면 된다.
여기에서는 shThemeDefault.css를 사용했다.


자바 스크립트 부분을 보면 여기에도 shCore.js가 기본적으로 필요하다. 그리고 자신이 입력하고 싶은 코드의 언어와 관련있는 파일을 추가해줘야 한다.
여기에서는 c#, xml, css, c++, java, javascript, php, action script 3를 포함했다.

너무 많은 언어를 포함하면 약간 느려질 수도 있다고 하니 참고하자.



이제 소스 코드를 넣을 준비가 끝났다.
이제 실제로 코드를 넣어봐야 하는데 이때에는 <script />태그 또는 <pre />태그가 사용된다.
그리고 위지윅 편집모드가 아닌 html편집 모드에서 편집을 해야 한다.


먼저 <pre />태그를 사용하는 방법부터 알아보자.
<pre class="brush: js">
function foo() {
//소스 코드
}
</pre>

이렇게 태그를 이용해서 소스코드를 삽입할 수 있다. class="brush:"부분에 소스코드의 언어를 입력하면 된다.
이때 자바스크립트를 사용하고 싶다면 js, jscript, javascript중 하나를 brush 뒤에 입력하면 된다. 
소스 코드의 언어에 해당하는 브러쉬 이름과 파일 명은 아래의 표를 참고하자.

Brush name Brush aliases File name
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js

SyntaxHighlighter가 2.1버전으로 업데이트되기 이전까지는 <pre />태그만을 이용해서 소스코드를 넣었었다.
그런데 이 <pre />태그에는 치명적인 단점이 있다. <pre />태그 안에서 <를 사용하면 새로운 태그가 시작됨을 의미한다.
그래서 글쓴이가 원하지 않는 결과를 초래할 수 있다.

예를 들어,
#include<iostream>

int main() {
return 0;
}

위와 같은 코드를 입력하고 싶어서 <pre>코드 안에 소스를 입력하면 다음과 같은 예상치 못한 결과를 볼 수 있다.

#include<iostream>
int main() {
return 0;
}
</iostream>

이렇게 되는 이유는 간단하다. <iostream>이 태그의 시작으로 보고 자동으로 이를 닫아주는 </iostream>을 생성하기 때문이다.
그렇다면 이러한 문제를 해결하려면 어떻게 해야할까? <대신에 <에 해당하는 escape문자인 &lt;을 사용하는 것이다. 이런식으로 특수 문자를 표현되는 형식이 아닌 &와 함께 escape 문자로 바꿔서 입력하는 것이다.
그런데 이렇게 하려면 정말 귀찮다. <뿐만 아니라 여려가지 다른 기호들도 있는데 그들을 모두 코드 방식으로 입력해야 한다면 너무 불편하다.

그래서 SyntaxHighlighter 2.1버전에서는 <script />태그를 사용할 것을 추천한다.
사용방법은 다음과 같다.

<script type=" syntaxhighlighter"="" ><![CDATA[
  #include<iostream>

  int main() {
    return 0;
  }
]] >< /script>

이렇게 <script />태그를 이용하면 <![CDATA[ 이후에 escape문자를 사용할 필요없이 그대로 소스 코드를 복사 + 붙여넣기를 할 수 있다는 것이 이점이다. 위 코드를 입력하면 다음과 같은 결과를 볼 수 있다.
#include<iostream>

int main() {
return 0;
}

그래서 결론은 태그의 코드가 약간 길어지더라도 escape문자를 사용하는 것보다 나으니까 <script/>태그를 이용해서 소스 코드를 입력하자.