소스 코드를 이쁘게 포스팅하기

소프트웨어 관련 블로그를 시작하려니 소스코드를 이쁘게 보여주는 기능(Syntax Highlighting)이 왠지 필요할 것 같다.
별로 중요하지 않은 이런 것에 집착을 해서 장시간 검색 돌입... 그리고 마침내 Syntaxhighlighter라는 툴을 설치한 후, 글을 올릴때 태그를 소스 코드 앞뒤로 붙여 주면 된다는 것을 확인했다.

사용법은 매우 단순하다. Syntaxhighlighter를 설치(참조: http://anshnote.blogspot.kr/2011/07/syntax-highlighter-blogger.html) 한 이후에, 포스팅 할 때 아래와 같이 소스코드 앞뒤를 pre 태그로 감싸주면 된다.

예: Javascript의 경우 <pre class="Javascript" name="code">var foo = function(){ console.log("hello world"); } </pre>

참고로 textarea 태그와 pre 태그의 사용 방법이 똑같은데, textarea 태그를 사용하면 불필요한 라인이 코드사이사이에 추가되는 현상이 발생했다. 그러므로 textarea 태그보다는 pre 태그를 사용하는 것이 좋다.


우리나라 블로그 중에는 추천을 받아야만 가입할 수 있는 티스토리 만이 Syntaxhighlighter 기능을 잘 지원하기에 눈물을 머금고 blogspot.com에 정착한다. 인간관계가 헬름 협곡과 같은 나에게 추천이라니...ㅋ

정리

1. 소스 코드를 이쁘게 해주는 Syntaxhighlighter는 블로그 사이트마다 지원 여부가 다른데, 국내는 티스토리, 국외는 blogspot에서 잘 지원된다.

2. Syntaxhighlighter 설치 후 글 작성시 소스 코드 앞뒤를 pre 태그로 싸주면 소스 코드가 이쁘게 출력된다.