블로그에서 바로 사용하는 소스 하이라이팅(SyntaxHighlighter / QuickHighlighter)

이번에 새로이 게시물을 준비하면서 본문에 소스를 첨부하고 싶어졌다. 이번에는 단순한 소스를 올리는것에서 발전해서 여러개의 소스를 종합하여 올리고, 그들사이의 연접관계를 효과적으로 나타내고 싶어서 어떻게 할까 하다가 다른 여러 블로그에서도 쓰이는 소스 하이라이트(소스 코드 강조) 기능을 적용해보기로 했다.

처음으로, 자바스크립트로 소스 코드를 렌더링하는 국내 블로그계에서 가장 유명한듯한 SyntaxHighlighter 를 시도해 보았다. 티스토리에 관련 파일을 올리고 소스를 첨부하여 결과물을 보았으나 불만스런 부분이 있었다. (적용 방법)

첫째로, 소스를 보여주는데 시간이 소요되어 답답한 면을 보여주었다.
커스터마이징을 해야 했거나, 첨부되어있던 모든 언어처리 스크립트 파일을 인클루드 했기 때문이었을지도 모르겠지만 즉각즉각 뽑아내지 못했고, 라인수가 늘어날수록 점점 느려지는 것을 느꼈다.

두번째, 버전이 업그레이드 됨에 따라 변경해주어야 할 사항들이 있다.
1.x 버전에서 2.x 버전으로 업그레이드 하면서 파일이 바뀌고, 소스 처리방식도 바뀌어서(textarea->pre 태그로 감싸주기) 여지껏 올렸던 모든 게시물을 수정해야 한다. 게다가 티스토리의 경우, 파일을 업로드 하는 경로가 일차적인 images 폴더에만 위치하기 때문에(하위 폴더를 만들 수 없는것처럼 보인다) 파일 관리하기가 쉽지 않다.

세번째, 게시물을 올리는게 번거롭다.
처음 게시물을 입력할 때, 태그로 우선 영역을 설정해주고 그 안에 소스코드를 입력해야 하는데, 이때 pre태그를 처음부터 입력해주어야 한다. 물론 서식페이지로 저장한후에 불러오면 편하지만... 게다가 WYSWIG 입력란에서는 태그들이 자동으로 붙기 때문에 소스를 바로 보여주므로 많이 지저분해 진다. 뭐 html 입력모드로 전환하면 되겠지만 모드를 왔다갔다 해야하는 불편함이 따른다. 게다가 잘못 건드리기라도 하면-_-

네번째, 간혹 소스 인식범위가 확실하지 않아 뒷부분까지 먹어버리는 불상사가 생긴다.
지금 이 게시물을 작성하고 있는 시기가 SyntaxHighlighter의 사용을 포기하고 대체물을 찾아서 그에 대해 적는 시기이기 때문에 언제였는지는 기억이 나지 않지만, 또 설정도 다 지워서 다시 상황을 만들기도 귀찮고 해서 정확한 근거는 내세울 수 없지만 자바 소스를 업로드 하는데 오류가 생겨서(물론 원본 소스는 컴파일까지 되는 정상적인 소스였고) 게시물 아래에 따라붙는 '연관게시물' 섹션까지 잡아먹게 되었다.


이런저런 이유로 SyntaxHighlighter를 포기하고 다른 대체요법을 찾다가 발견한것이 QuickHighlighter라는 사이트이다. 뭐 구글에서 검색하니까 바로 나왔지만 국내 사이트에서 언급이 안되어있길래 한번 적어본다.

사이트는 매우 간단한 인터페이스로 구성되어 있으며, 바로 아래의 모든 언어를 지원해준다

(이와 비슷한 사이트로 Codepad라는 사이트가 있는데, 그사이트는 언어의 수가 한정이 되어있다)

ABAP ActionScript ActionScript 3 Ada Apache Log File AppleScript ASM (NASM based) ASP AutoIT Bash Basic 4gl BlitzBasic Backus-Naur form C C for Macs CAD DCL CAD Lisp CFDG ColdFusion C++   C++/QT C# CSS D Delphi Diff DIV DOS GraphViz Eiffel Fortran FreeBasic Genero (4GL) GetText Glsl GML Groovy Haskell HTML (4.0.1) Uno IDL Ini Inno IO Java   Java 5 Javascript Kixtart LaTeX Lisp Lotus Formulas Lotus Script Lua M68k Matlab mIRC MPASM MXML MySQL NullSoft Installer Objective C OCaml   OCaml (Brief) Openoffice.org BASIC Oracle 8 Pascal Per (4GL) Perl PHP   PHP (Brief version) PL/SQL Python QBasic/QuickBASIC Rails Windows Registry robots.txt Ruby SAS Scala Scheme SDLBasic Smalltalk Smarty SQL TCL Plain text thinBasic T-SQL Visual Basic VB.NET Verilog VHDL Visual FoxPro Winbatch XML X++ Z80 Assembler

이 사이트에서는 또한 옵션을 지정해줄 수 있는데, 각각에 대해서 설명해본다.

Line Numbers(Fancy/Normal/None) : 라인마다 줄번호를 왼쪽에 입력한다. Fancy는 5의 배수의 숫자마다 글자의 색과 스타일을 변경시켜서 더욱 보기 쉽게 한다. Normal은 그냥 보여주는거고 None은 없는것이다.

Wrap overflowing text : 줄바꿈 설정을 한다.

Tab width (in spaces) : 탭키로 들여쓰기를 한것을 스페이스로 변환하여 출력한다.(최대 10)

Combine Style and HTML Code : 체크하지 않으면 <style>코드와 <div>코드가 분리되어서, style코드에 스타일 정보를 따로 저장한다. 블로그에 복사할 경우에는 이 항목을 체크하지 않아야 기본출력으로 지정된 Courier New폰트가 지멋대로 꼬이지 않는다. 차라리 font-family설정을 없애는 편이 낫다. 그래도 구문강조는 잘된다

Highlight inbuilt keywords, data types etc : 소스를 강조해줄 뿐만 아니라 데이터타입등과 같은 주목할만한 키워드들에 대해 강조를 해준다(심지어 API내의 메뉴얼까지 링크를 시켜주는 친절한 서비스도 제공한다)

Strict Mode : php와 같은 스크립트 언어일 경우, 이게 소스파일의 모든 부분에서 실행되는 것이 아니라, 일부 일부에 삽입되는 형태를 취할 수도 있기 때문에, delimiters(구분자라고 하나?? php의 경우에는 <? / ?>)사이에 있는 부분만 처리한다

이런 쓸데없는 설명 필요 없고 그냥 블로그에 소스강조기능을 쓸거다.... 라고 하면 
소스를 텍스트박스안에 붙여넣고 Highlight! 버튼을 누른다. 그 후 나오는 결과물을(소스말고) 그대로 복사해서 위지윅 영역에 복사하면 끝..-_-;;;;

자... 아래를 보자, 한줄짜리 보기 힘든 코드의 가독성이 순식간에 증가되었다. 간단하고 멋지지 않은가!!!

Element.implement({getCaretPosition:function(){if(this.createTextRange){var r=document.selection.createRange().duplicate();r.moveEnd("character",this.value.length);if(r.text===""){return this.value.length;}return this.value.lastIndexOf(r.text);}else{return this.selectionStart;}}});var ResizableTextbox=new Class({Implements:Options,options:{min:5,max:500,step:7},initialize:function(_2,_3){var _4=this;this.setOptions(_3);this.el=$(_2);this.width=this.el.offsetWidth;this.el.addEvents({"keydown":function(){this.store("rt-value",this.get("value").length);},"keyup":function(){var _5=_4.options.step*this.get("value").length;if(_5<=_4.options.min){_5=_4.width;}if(!(this.get("value").length==this.retrieve("rt-value")||_5<=_4.options.min||_5>=_4.options.max)){this.setStyle("width",_5);}}});}});

스브스에서 하는 하우스를 보면서 글을 작성하는 중이다.
왜 편하게 보지않고 이 글을 작성하냐.. 하면 하우스를 그렇게 좋아하는 편은 아니기 때문이다. 단지 보는 이유라면... 다운받아 보는 것보다 화질이 좋아서ㅋㅋㅋ 고화질은 보던것이더라도 항상 새롭다. ;)