티스토리 구문강조(코드하이라이팅)하는 4가지 방법

여기서는 실제 적용하는 방법보다 구문강조기능을 소개합니다.
저는 이전부터 티스토리 블로그를 사용하면서 블로그내에서 소스 코드 즉 html 이나 css 등의 코드를 쓴곤 했었습니다.
허나 이번에 html5로 제 블로그를 마크업하면서 테스트로 많은 구문강조기능을 해봤는데요.. 그중 느낀점과 추천하는 구문강조 기능을 알려드립니다.

제가 대략 테스트 해보고 적용해본 구문강조 기능은 한 10가지 정도 되는것 같습니다.
자바스크립트를 잘 모르면서도 자바스크립트 기능을 써야 하는 불편한 진실.....
불편한 진실은 이것 뿐만이 아닙니다.

티스토리는 pre 안에서 자기 멋대로 줄바꿈 태그인 <br /> 을 삽입하는 버그가 있습니다.
고객센터에 요구도 해보고 다른 분들의 글들도 보았습니다.

불편한 진실은 이것뿐만이 아닙니다. 티스토리는 치환자라는 것을 사용하는데요. 이를 본문에서 사용할 수가 없습니다.
이 또한 해결 방법을 알려드립니다.

구문강조 기능은 총 3가지로 압축해서 추천드립니다.
잘 보시고 본인의 환경에 맞는것을 사용하시기 바랍니다.

!!! 반드시 참고해야 할 사항.

구문강조 기능을 사용할 때는 꼭 필요한지 여부를 판단하세요.
또 한번 적용한 다음에는 수정할 수 있지만 계속 해서 글을 발행할경우 나중에는 구문강조 기능을 수정하기 어렵습니다.
그것은 발행된 글들에 구문강조 기능이 영향을 미치기 때문입니다.
그러니 반드시 적용전에는 필요한지를 살펴보시고 한번 적용하면 끝까지 적용할 계획을 하세요. 되도록이면 구문강조기능을 변경하지 않는쪽으로요.

1. codeHighlighter.

HTML5 를 사용하고 있는 사용자라면 사용해볼만만 구문강조 기능입니다.
이 구문강조 기능의 특징은 HTML5 명세에 등록된 요소들을 클릭할 경우  그 요소의 레퍼런스로 이동 할 수 있다는 점입니다.
이는 HTML5을 배울수도 있는 좋은 기능이라고 생각하나 필요에 따라서는 불필요한 부분일수도 있습니다. 개인차가 있겠지요.
즉 HTML5 명세에 등록된 요소들은 명세의 해당 부분으로 링크합니다.
아래처럼 요소에 마우스를 갖다대면 밑줄이 생기고 클릭할 수 있게 변합니다.

내가 모르는 요소에 마우스를 대고 그 요소를 클릭을 하면 아래처럼 해당 레퍼런스에 이동이 됩니다.

이는 클리어보스에 회원분이신 닉네임 검은태양님이 제작한 코드 하이라이트 기능입니다.
자세한 사항과 설치법은 홈페이지를 참고하시기 바랍니다.
codeHighlighter 소개 : http://tranbot.net/util/codeHighlighter/

이 구문강조 기능의 장점은 html5 명세로 이동한다는 점과 가볍다는 점입니다. 
즉 자바스크립트 하나와 css 파일 하나만 링크하면 되고 그 파일또한 용량이 적어 가볍다는 점입니다. 
고로 html5 로 마크업이 된 사이트라면 강조하는 구문강조기능입니다.

2. highlight.

jQuery 를 사용한다면 highlight를 추천합니다.
이 또한 추천이유는 가볍다는 점입니다. 딱 하나의 자바스크립트와 css 파일하나입니다.
이 구문강조 자바스크립트는 html,css, js, php 딱 4개만 강조를 합니다. 다른 언어를 사용하신다면 다른 구문강조 기능을 이용하시면 됩니다.
저의 경우 추천이유는 가볍다는 점입니다.
jQuery syntax plugin 으로 사용해볼만 합니다.

홈페이지 : http://webcodingstudio.com/blog/jquery-syntax-highlight-plugin

구문강조가 블로그에 미치는 점.

구문강조는 필수적인 요소는 아닙니다. 즉 부가적인 요소죠. 그래서 선택할 때 용량을 반드시 확인 해야 합니다. 또한 선택하는 언어가 무었인지 반드시 확인하고 선택해야 합니다.

위 구문강조 기능 모두다 그냥 사용하면 아주 좋은 구문강조 기능이나 제 입장에서 볼때 하나 미흡한 점 때문에 선택하지 않았습니다.
그것은 바로 하위 브라우져의 호환성입니다.
저도 현재 html5를 사용하지만 소수의 사용자 때문에 브라우져 호환성을 생각하지 않을수 없었습니다.
하지만 시일이 조금 지나면 저도 제일 위의 구문강조 기능을 사용하지 않을까 싶네요.

3. syntaxhighlighter.

제가 선택한 구문강조기능입니다. 이 구문강조의 장점은 하위 브라우져를 완벽 지원한다는 점입니다.
또한 html5의 사항에서도 마찬가지로 IE6까지 정상적으로 보여집니다.
홈페이지 :  http://alexgorbatchev.com/SyntaxHighlighter/ 

또한 여러가지 기능과 테마 등은 장점이라 할 수 있습니다.
하지만 제가 첫번째로 뽑지 않은것은 용량입니다.
저의 경우 html, css, js 이렇게 3개를 사용하는데요. 그러면 3개의 자바스크립트와 css 파일이 있어야 합니다.

 
이  syntaxhighlighter 는 이전에도 이용한 적이 있습니다. 티스토리의 버그 때문인지 그 당시에는 상당이 어려운점이 있었는데...현재 다시 해보니 많이 좋아진듯 합니다.
 

4. 온라인 구문강조 pastie.org.

이전에 제가 대박이라고 소개한 적이 있는 구문강조기능입니다.
이 기능은 다른것과 틀리게 티스토리에 설치를 하지 않고 즉, 자바스크립트나 css 파일을 업로드 하지 않고 바로 사용이 가능합니다.
또한 pre 같은 태그를 사용할 필요도 없고, 티스토리 치환자 또한 마음껏 표시할 수 있습니다.
홈페이지 :  http://pastie.org/pastes/new

자주 사용하지 않는 분에게는 추천합니다.
이 또한 html5에서도 정상적으로 잘 표시됩니다.
언제까지나 무료로 누구나 이용할 수 있습니다. 

참고

티스토리 치환자 본문에 표시하는 방법