Code Syntax Highlighter 사용하기
설치형 wordpress의 플러그인으로 다양한 Syntax Highlighter 플러그인 들이 존재하지만 대부분 2가지 형태로 나눌수 있다.
GeSHi를 사용해 Highlight하는 종류와 Syntax Highlighter라는 java script를 사용하는 종류로 나눌수 있다.
하지만 자신이 서버를 운영하여 서비스중인 블로그가 아닌 경우 GeSHi를 이용하는 방법은 완전히 불가능하다. 반면에 Syntax Highlighter를 이용하면 자신의 블로그에 손쉽게 Syntax Highlight기능을 이용할 수 있다. 게다가 Syntax Highlighter는 서버 side 코드가 없고, client에서 구동되기 때문에 서버에 부담이 줄어드는 장점이 있다.
이번 포스팅에서 다룰 내용은 Syntax Highlighter를 이용하여 자신의 Blog에 적용 하는 방법을 다룬다.
1. Syntax Highlighter의 소개
Syntax Highlighter는 http://alexgorbatchev.com/wiki/SyntaxHighlighter에서 얻을 수 있으며 설정이나 이용방법 등을 얻을 수 있다. Syntax Highlighter는 현재 2.x 버전 까지 나와 있고 Highlight 적용 되는 언어도 다양한 편이다.
2. Syntax Highlighter의 적용
설치형 wordpress의 경우 Syntax Highlighter 를 사용한 플러그인 중에서(wordpress.org에서 검색)Chili Code Highlighter 라는 플러그인이 있는데 이 플러그인이 업데이트가 되서(2009년 11월 현재) SyntaxHighlighter Evolved v2.3.x로 배포(제작자는 동일)되고 있다. 이 플러그인은 wordpress에서 설정페이지를 제공하기 때문에 다양한 설정이 가능하고 향후 손쉬운 업데이트 가능한 이점을 누릴 수 있다.
현실적으로 wordpress 설치형을 사용하는 블로거가 아닌 경우 위의 플러그인은 무용지물이다. Tistory의 경우 일부의 파일 업로드와 skin편집을 제공하기 때문에 배포되는 Syntax Highlighter를 업로드 하고 스킨에 약간의 코드만 추가하면 이용이 가능하다.
하지만 파일 업로드를 제공하지 않는 블로그의 경우 사용하기 위해서는 블로거가 스킨을 편집 할 수 있는지 먼저 확인이 필요하다. 그리고 스킨의 Header 태그 부분에 Syntax Highlighter 구동을 위한 코드가 있는 URL만 맞춰주면 손쉽게 적용이 가능하다.
이를 위해 Syntax Highlighter의 페이지에서 배포본 별로 호스팅을 해주고 있다. 게다가 적용 방법을 설명해놓은 블로그의 글까지 링크해 주고 있다. 주소는 다음과 같다.
wesome syntax highlighting made easy
3. Tistory에서 Syntax Highlighter 이용하기
SyntaxHighlighter 2.X를 Tistory에 적용하기글 에서는 Syntax Highlighter의 배포 파일을 Tistory 업로드해서 사용하는 방법이 설명되어 있지만 이 글에서는 호스팅을 이용하는 방법을 설명하겠다. 호스팅을 이용하는 방법은 아주 간단하다. 단순이 코드만 스킨파일에 추가해주면 된다. 단 스킨은 변경이 가능한 스킨이어야 한다.
관리자모드의 스킨 메뉴의 HTML/CSS 편집 이라는 곳으로 가면 스킨 편집 창이 나타난다.
Tistory 스킨 HTML/CSS 편집모드
</header> 태그 안쪽에 다음과 같은 코드를 추가한다.
저장버튼을 눌러 저장한다.
4. 사용방법
사용방법은 간단하다. <pre class=”brush: html”> 코드 </pre”> 의 형식으로 이용하면 되며 사용할 수 있는 언어(brush)는http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes에서 확인이 가능하다.
만약 지원 언어목록에는 있지만 정상적으로 동작하지 않고 없는 brush라고 팝업창이 나타난다면 앞서 brush 코드의 링크가 없기 때문이므로 스킨 파일에 가서 추가해준다.
예를 들어 Action Script 3.0 에 대한 brush는 위에서 추가하지 않았는데 이를 추가하려면 다음과 같이 추가한다.
brush목록에서 shell에 대한 brush파일과 alias를 확인 후 다음코드를 3에서와 같은 방법으로 추가한다.
그리고 표현되는 스타일도 변경이 가능한데 이는 아래 코드에서 css파일의 변경을 통해 변환이 가능하다.
스타일 테마 참조 : http://alexgorbatchev.com/wiki/SyntaxHighlighter:Themes
사용방법 참조 : http://alexgorbatchev.com/wiki/SyntaxHighlighter:Usage
5. 사용시 문제점
< >가 포함된 코드의 경우 (예를들어 HTML/XML)의 경우 <pre />를 사용하면 정상적으로 표현되지 않는 경우가 있을 수 있다.
(개발자의 배포 페이지에서 <script type=”syntaxhighlighter” >라는 특별한 태그가 2.1.xxx부터 반영이 되었다. <![CDATA[ ]]>로 막아 escaping하지 않은 코드도 표현되도록 했지만 약간의 오류가 있는 듯 마지막에 ]] 등의 기호가 남아 정상적으로 표기가 되지 않는다.)
이러한 경우 escaping한 코드를 <pre > 사이에 넣는 것이 안전하게 출력된다.
예
<script type="syntaxhighlighter" class="brush: html"><![CDATA[ <html> <head> <title>Carter Tomorrow Fund Donations</title> <meta name="title" content="Help Give to the Carter Tomorrow Fund" /> <meta name="description" content="Show your support and help out with a small gift" ]]></script>
을 가지고 테스트를 해보면
예 escaping안함 cdata사용한 경우 (위 코드를 복사해서 사용)
escaping함 pre사용 (CDATA로 막힌 부분을 복사해서 escaping한 후 pre태그 사용)
<html> <head> <title>Carter Tomorrow Fund Donations</title> <meta name="title" content="Help Give to the Carter Tomorrow Fund" /> <meta name="description" content="Show your support and help out with a small gift"
중요하기도 하고 사소하기도 한 문제지만 스킨이 일정 크기 이상 크지 않다면(고정길이 스킨의 경우) 또는 확장 가능한 스킨이 아니라면 (스킨 글을 싣는 부분의 내의 가로 길이가 길지 않거나 또는 글자가 커서 word-wrap이 빈번히 일어난다면) 미려하게 표현되지 않는 문제점이 있다.
© 2009, Coder's cay. All rights reserved.
If you want to publish other site, you must provide original source.
(다른 곳에 게시하는 경우, 원본의 출처를 표기해야 합니다.)
