한빛출판네트워크

저자: 한동훈(traxacun)

[지난기사보기]
ASP.NET 가이드 6. 자동 포커스 이동 & 페이지 만료하기
ASP.NET 가이드 5. NDoc을 통한 코드 문서화
ASP.NET 가이드 4. 통합 예외처리
ASP.NET 가이드 3. UI 향상 및 사용자 템플릿 만들기
ASP.NET 가이드 2. 숫자/문자 입력 텍스트 박스 만들기
ASP.NET 가이드 1. 자바 스크립트 사용하기

원래 계획은 NHibernate을 다루는 방법이나 폼의 값들을 매핑하는 방법에 대해 다룰 생각이었으나 주변에서 IE7 지원에 대한 내용과 구문 강조기능(Syntax Highlighting)에 대한 이야기가 많아서 주제를 변경하게 되었다.

구문 강조 기능을 사용하는 이유는 시각적인 즐거움 뿐만 아니라 문서 가독성을 높여주기 때문이다. 구문강조 기능이 있는 사이트와 그렇지 못한 사이트를 비교하면 그 차이를 쉽게 알 수 있을 것이다.

구문강조 방법

구문강조 기능은 매우 다양한 방법으로 구현되고 있다. 윈도우 응용 프로그램과 웹 응용 프로그램에서 이를 구현하는 방법이 다르며, 여기서는 ASP.NET이라는 제목을 달고 있으니 웹에 한정해서 살펴보자.

1. 외부 프로그램을 이용한 구문강조

대표적으로 많이 사용되는 프로그램에는 Highlight, FSF의 Source-highlight등이 있다. 이들 프로그램은 다양한 프로그래밍 언어를 지원하지만, 항상 소스를 구문강조된 HTML로 변환하고, 이를 다시 웹 페이지에 편집해서 올려야하는 번거로움이 있다. 여간한 정성이 아니면 이러한 프로그램은 잘 사용하지 않게 된다.

2. ActiveX 컨트롤을 이용한 구문강조

DHTML 편집기의 형태로 윈도우 환경의 컴포넌트를 가져다가 웹에서 바로 사용하는 방법이다. 이 방법은 기존의 코드를 사용하기 때문에 구현이 비교적 쉽지만 ActiveX 컨트롤을 지원하지 않는 다른 운영체제에서는 사용할 수 없다. 또한, 메모리 사용량이나 여러면에서 무겁다는 느낌을 주기 때문에 불편하지만 사용하는 곳이 꽤 많다.

CodeHighlighter ASP.NET Control과 같이 구문강조 기능을 지원하는 무료 ASP.NET 컨트롤을 이용하는 방법이 있지만 이 역시 서버측에서 변환이 일어나기 때문에 부하가 크며, ASP.NET에서만 이용할 수 있다. 게다가 소스 코드 제공이나 추가로 다른 언어에 대한 구문강조 기능을 정의하기도 불편하다.

3. 실시간 변환을 통한 구문강조

1번과 큰 차이점은 없다. 다만, 사용자에게 보여줄 때 소스 코드를 구문강조된 HTML로 변환하여 보여주는 방법이다. PHP PEAR의 Text_highlighter가 대표적인 구문강조 도구다. 이 방법은 기존의 코드를 변환하지 않아도 된다는 장점이 있지만, 사용자에게 보여줄 때마다 항상 서버에서 코드를 변환해서 보여주어야하기 때문에 방문자가 많은 사이트에는 적합하지 않다.

4. JavaScript를 이용한 구문강조

워드프레스와 같은 설치형 블로그의 플러그인 형태로 설치되는 FriendlyCode 등이 사용된다. FriendlyCode와 같은 도구는 자바스크립트를 이용해서 사용자의 브라우저에서 실시간으로 코드를 변환해서 보여주는 형태를 취한다. 즉, 서버에서는 코드를 변경하지 않아도 되고, 변환이 사용자 PC에서 일어나기 때문에 서버 부하를 고려하지 않아도 된다는 장점이 있다. 게다가, 한 번 전송된 자바스크립트는 사용자 PC의 하드디스크에 저장되어 있기 때문에 큰 네트워크 부하가 발생하지 않는다. FriendlyCode를 소개하면 좋겠지만, 이는 워드프레스에서만 사용할 수 있는 플러그인이다. 물론, 이 코드를 분석해서 자신의 코드에 사용해 본다거나 하는 것도 시도해 볼만하다. 주말마다 시간에 쫓기어 글을 써야하는 내 입장에선 하기 어려운 일이다. 누군가 다른 분이 FriendlyCode를 분석하고, 다른 곳에서 활용하는 방법을 써보는 것도 좋겠다라는 생각을 해본다. 다행히도, 특정 응용 프로그램의 플러그인도 아니고, 특정 프로그래밍 언어에 관계없이 사용할 수 있는 star-light이 있다. 여기서는 star-light를 ASP.NET에서 사용하는 방법을 설명할 것이다.

Star-light을 이용한 구문강조


[그림1] 웹에 표시할 PHP 소스 코드

위와 같은 소스 코드를 작성하고, HEAD 태그 사이에 다음 CSS를 추가했다.

mmlt;link rel="stylesheet" href="css/star-light/star-light.css" type="text/css"/mmgt;

다음은 각각 구문강조 기능을 사용하지 않은 경우, 사용한 경우, FireFox에서 살펴본 경우를 나타낸 것이다.


[그림2] 구문강조 기능을 사용하지 않은 경우


[그림3] IE에서 구문강조 기능을 적용한 예


[그림4] FireFox에서 구문강조 기능을 적용한 예

위 결과에서 알 수 있는 것처럼 구문강조 기능을 위한 star-light.css 삽입과 PRE 태그안에 class="php"와 같이 사용하고자 하는 언어를 적용하는 것이 전부다. 이 방법은 매우 손쉽게 구문강조 기능을 추가할 수 있으며, DB에 저장된 데이터에 대한 변환을 하지 않는다는 장점을 갖고 있다.

이제, 이 도구를 사용해 볼 마음이 들었는가? 그렇다면 star-light를 여러분의 응용 프로그램에 어떻게 추가해야 IE/FireFox에서 모두 동작할 수 있는지, 6회까지 진행해온 BasePage에 이 기능을 어떻게 통합시킬 것인지 살펴보자.

Star-light 설정

star-light 사이트에서 다운 받았다면 star-light 디렉터리에 다양한 파일이 들어있다. 내 경우엔 /TestBasePage에만 적용하길 원했기 때문에 /TestBasePage/css/star-light 으로 파일을 모두 복사했다. 웹 사이트의 어떤 페이지에서나 구문 강조 기능을 적용하고 싶다면 사이트 루트에 /css/star-light과 같이 만드는 것을 권한다. 앞으로의 글은 /TestBasePage/css/star-light 폴더에 모든 파일이 들어있다고 가정하고 설명한다.

먼저 star-light.css 파일을 변경해야 한다.

pre.css {
behavior: url(css/star-light/star-css.htc) url(css/star-light/star-light.htc);
-moz-binding: url(bindings.xml#star-css.htc|star-light.htc);
}

여기서 볼 수 있는 것처럼 각 언어별로 pre.language의 형태로 CSS가 작성되어 있다. CSS는 두 부분으로 되어 있는데 첫번째 behavior는 IE에서 적용할 경로명이고 -moz-binding은 FireFox와 같은 Mozilla 계열의 브라우저에 적용되는 부분이다. 경로는 behavior 부분만 수정해주면 된다. 필자의 경우 css/star-light/star-css.htc와 같이 상대경로로 지정했다. 모든 CSS에 대해서 경로를 적절하게 변경했으면 설정은 끝난 것이다.

구문강조 기능을 적용하고 싶다면 mmlt;pre class="php"mmgt;코드mmlt;/premmgt;와 같이 PRE 태그를 사용하고, star-light.css에 대한 링크만 추가하면 된다.

Star-light에 C# 구문강조 기능 추가하기

Star-light는 JavaScript, HTML, CSS, XML, PHP, Email, VBScript, T-SQL만 지원한다. 추가로 다른 언어를 지원하려면 직접 만들어야한다.

star-light/bindings.xml 파일에 다음과 같이 star-cs.htc를 추가해준다.

mmlt;binding id="star-tsql.htc|star-light.htc" extends="#behavior"/mmgt;
mmlt;binding id="star-cs.htc|star-light.htc" extends="#behavior"/mmgt;

이제 star-cs.htc 파일을 정의하는 것인데 구문이 가장 비슷한 star-php.htc를 복사해서 star-cs.htc로 만들었다.

C# 키워드에 대한 구문강조를 위해 star-cs.htc에서 KEYWORDS 변수의 값을 변경하면 된다.

var KEYWORDS = "abstract|event|new|struct|as|class|using|" +
"elseif|endif|endfor|endswitch|endwhile|exit|for|foreach|function|global|" +
"if|include|include_once|next|return|require|require_once|switch|while";

여기서는 맛보기로 작성했기 때문에 전체 C# 키워드는 아니다. C# 키워드 목록 을 참고해서 작성해주면 된다.

star-cs.htc의 다른 부분도 그다지 어렵지 않다.

tabStop = 4;

// ignore words that start with "$"
parser.add(/\$\w+/, IGNORE);
parser.add(/mmlt;\%|\%mmgt;/, "color:red;font-weight:bold");
parser.add(KEYWORDS, "color:blue");
parser.add(/\w+/, "color:teal");

위와 같이 탭간격을 지정할 수 있고, parser.add의 형태로 정규식이나 문자열에 대한 규칙을 추가할 수 있게 되어 있다.

때문에, 약간의 수정으로 다른 언어에 대한 구문 강조 기능도 쉽게 작성할 수 있다. 다음은 C# 키워드도 제대로 추가하지 않은 상태에서

만 추가하여 C# 구문강조 기능을 사용한 예이다. 이렇게 대충 만들고도 생각보다 이쁘게 나와서 좋다. 





[그림5] C# 구문강조 기능을 사용한 예



BasePage에 구문강조 기능 추가하기



앞에서 살펴본 것처럼 구문강조 기능을 추가하려면 모든 페이지에 CSS 링크를 추가해야 한다. 이런 것들은 BasePage에 추가하는 것이 더 편할 것이다. 



BasePage에 통합하기 위해 EnableSyntax() 함수를 정의했다.





[그림6] EnableSyntax() 함수



좀 더 나은 구현을 위해서는 web.config와 같은 XML 파일에 CSS 파일 경로를 지정하기 바란다.(대부분의 ASP.NET Portal 소스들은 그렇게 구현하고 있다)



위 코드에서 눈여겨 볼 것은 HEAD 태그에 CSS LINK를 추가하기 위해 head 태그를 컨트롤로 가져오는 FindControl() 함수다. 위와 같은 형태로 코드를 사용하기 위해서는 .ASPX 페이지의 HEAD 태그를 다음과 같이 변경해야한다.





[그림7] HEAD 태그 수정 



매번 HEAD 태그에 이와 같이 추가하는 것은 번거로운 일이다. ASP.NET 가이드 3. UI 향상 및 사용자 템플릿 만들기 에 Mona WebForm과 같은 사용자 템플릿에 HEAD 태그를 수정한 것을 반영하면 될 것이다. 여기까지 읽으면서 Mona WebForm을 만들지 않은 사람이 있단 말인가! 6회분 까지의 전체 소스도 다운받기 바란다.



구문강조 기능을 추가하고 싶을 때는 BasePage_PreRender에 EnableSyntax()를 추가하기만 하면 된다. 





[그림8] PreRender에 구문강조 기능 추가 



만약, 선택적으로 EnableSyntax를 적용하고 싶다면 어떻게 하면 될까? 그런 경우에는 web.config 파일에 여러분 나름대로의 설정 규칙을 만들면 된다.





[그림9] web.config에 구문강조 설정 기능 추가 



이와 같은 키를 추가하고, 키 값이 on 또는 off에 따라 EnableSyntax() 함수를 호출하도록 BasePage_PreRender를 변경하면 된다. 작성한다면 대충 다음과 같은 형태가 될 것이다. 





[그림10] webconfig의 EnableSyntax 설정에 따라 구문기능 적용하기



이와 같이 작성하게 되면 코드 컴파일없이 web.config 수정만으로 BasePage의 원하는 기능을 사용할 수 있을 것이다.



마지막으로, Star-light.css를 추가하기 위해 HEAD 태그를 변경했는데, 그 방법은 VS 2003에서 디자인과 코드 화면을 번갈아 이동하면 HEAD 태그에서 server="runat"이 삭제되는 현상이 나타날 것이다. 따라서, 굳이 HEAD 태그에 넣지 않고, 전체적인 HTML 구조에 연연하지 않는다면 다음과 같은 무식한 방법도 사용할 수 있다.





[그림11] HEAD를 사용하지 않는 EnableSyntax



이와 같이 변경하면  태그 이전에 위 코드가 출력되게 된다. 이 경우에도 IE와 FireFox에서 모두 구문강조 기능이 적용되니 이용에는 별 문제가 없다.



다음 시간에는 약속대로 폼 컨트롤 처리에 대해 살펴보도록 하자.