1 Results for 'Code Colorizer'

  1. 2007.02.24 Code Colorizer - 코드에 색상을 입혀보자! (2)
MSDN이나 여러 강좌 사이트의 소스코드 리스팅을 보면 깔끔하게 컬러링이 되어있어 늘 부러웠습니다. 몇 달 전에도 소스코드를 올릴 때 가독성의 문제로 고민하고 구글링을 좀 해봤지만 별다른 소득 없이 포기를 했었는데요, 요즘 약간의 짬이 생기면서 다시 한번 검색을 해봤는데 아니 이게 웬일 훌륭한 코드들이 지천에 널려있더군요.

문제는 검색어. 전엔 무식하게 syntax, HTML, coloring 뭐 이따위 키워드로 검색했었던 것 같은데 전혀 소득이 없었고, code colorizer 라고 검색하니 쏟아져 나오더군요 :(

이 주제에 관심이 있는 분이라면 code colorizer로 검색해보시면 정말 많이 나올테니 취향에 맞춰 사용하시면 되겠고, 그 중에 제 취향에 맞는 두가지를 소개할까 합니다.

1. Multiple Language Syntax Highlighting(MLSH), Part1(JScript)Part2(C#)
2. CopySourceAsHtml (CSAH)

첫번째 MLSH는 JScript와 C#을 사용하여 입력된 문자열을 C,C++,JScript, VBScript, XML형식으로 컬러를 입혀 출력해줍니다. 여기에서는 편리한 JScript버전만을 얘기합니다.

MLSH의 장점을 추려보자면,
  • HTML 브라우저 만으로 동작
    XML+JavaScript+HTML만으로 이루어져 별도의 프로그램 언어나 컴파일 등의 과정이 필요 없고 브라우저 상에서 Copy & Paste로 작동하여 편리합니다.
  • 훌륭한 아키텍쳐 설계와 문서화
    언제나 CodeProject의 아티클은 감탄할 자아냅니다. 설계와 코드는 물론 문서화도 잘 되어있으니 문법 파싱에도 도움이 될 것 같네요.
  • XML을 통한 선언적 언어 형식 지원
    형식화할 언어에 대한 설정을 XML로 하도록 되어있고 이는 원하는 다른 언어를 XML편집만으로 추가할 수 있다는 말이 됩니다. 실제로 공개된 버전에는 C# 문법을 지원하지 않지만 몇가지 수정만으로 C#도 지원할 수 있었습니다!
  • 소스코드 원본의 충실한 재현
    줄번호가 붙지는 않지만 Copy & Paste가 필요할 땐 줄번호는 방해만 될 뿐입니다. 또 탭도 정확히 탭문자를 사용하여 소스를 Copy & Paste했을 때 지저분하게 공백 간격이 안맞거나 하는 현상이 없습니다. 무엇보다 이 점이 마음에 드네요.
하지만 모두 다 좋을 수는 없죠, 간단하게 쓰다보니 몇 가지 단점도 눈에 띄네요.
  • 해당 언어의 정확한 문법이 아닌 키워드 단위의 검사만 지원
    당연할지도 모르겠지만 사용자 정의 클래스라던가 연산자와 같이 상세한 구분은 불가능하고 사전에 정의된 키워드 단위로만 컬러링이 됩니다. 따라서 IDE에서 설정하는 것보다는 표현이 단순해질 수 있습니다.
  • 출력된 HTML코드를 포스팅하기 위해 스타일을 복사해야 함
    HTML상에서 출력된 화면 자체는 훌륭하지만, 이 것을 포스팅하고 제대로 보여주기 위해서는 스타일 시트 코드를 따로 복사해서 포스팅할 게시물에 첨부해야 합니다. 따라서 스타일시트 입력을 지원하지 않는 게시판이라면 원하는 출력형식대로 보여주기 어렵습니다.
  • 약간의 버그가 있고 더 이상 지원이 안됨
    치명적인 단점이죠. 작성자는 더 이상 이 프로젝트를 지원하지 않는 것 같습니다. 소소한 버그가 눈에 보이는데, 약간의 삽질로 우선 해결하긴 했습니다. 뒤에 수정한 소스를 첨부하죠
몇 가지 버그는 다음과 같고 약간의 트릭으로 해결은 했지만 그 외의 다른 버그가 있을 수도 있네요. 원본에서 수정한 사항은 다음과 같습니다.
  • C# 문법 지원!
    XML부분을 편집하여 C# 스타일의 키워드를 지원하도록 수정했습니다.
  • 꼭 필요한 스타일만 추출
    원본은 CodeProject.com의 메인 스타일시트를 사용하도록 되어있는데요, 필요한 스타일 코드만 추출해서 헤더에 넣었습니다.
  •  #include와 같은 전처리 지시자가 제대로 컬러링되지 않는 버그 수정
    원본에는 전처리자를 만났을 때 "\b전처리자\b" 이런식의 정규표현식을 사용했는데요 이것을 "전처리자\b" 이렇게 바꿨습니다.
  • 코드 중에 <pre> 태그가 있을 경우 그 뒤의 코드가 제대로 표현되지 않는 버그 수정
    원래대로라면 정규표현식으로 해결해야 하지만, 고치기가 너무 어려워서 단순히 입력코드에서 <, >와 같은 태그 브라켓을 &lt;, &gt;로 치환했습니다. 그 외의 다른 잠재적 문제도 해결될거라고 생각되네요.

수정된 코드를 첨부합니다. 당연하겠지만 이 코드에 대한 모든 권리는 원 저작자에게 있습니다.

CodeColorizer.htm

첨부 : CodeColorizer.htm

▶C++ 코드 예제입니다.

▶이번엔 C# 코드 예제입니다.

그런데 한가지 문제가 있군요!
C++코드는 VS6의 IDE에서 작성되었습니다. 예제를 보시면 간격조정에 탭이 사용되었고 HTML페이지에서도, Copy&Paste에서도 잘 먹습니다.
C#코드는 VS2005의 IDE에서 기본으로 작성된 Windows Application 예제인데요, IDE 자체에서도 탭으로 간격조정을 해놓은게 스페이스로 대치되어 있습니다. 아직 VS2005를 제대로 써보지 않았는데 VS2005에서는 원래 그렇게 조정되는지 모르겠네요.

어쨌든, 소스코드 원문의 양식을 충실하게 표현하면서 정의된 언어에 해당하는 키워드와 프리프로세스문을 적절하게 컬러링하고 있습니다.



두번째 CSAH는 VS2003 및 VS2005 IDE의 addin으로 제작자의 홈페이지에서 각각의 버전에 맞는 Install 버전과 소스코드 버전을 받을 수 있습니다. 혹시 한글 관련 문제가 있을지도 모르니까 가급적이면 소스 코드 버전을 받으셔서 컴파일 한 후 다음의 파일을 복사하여 {내문서}/Visual Studio 2005/Addins 폴더를 만들어 붙여넣으시면 됩니다(물론 2003은 2003폴더를 만들어야겠죠?).
  • CopySourceAsHtml.AddIn
  • CopySourceAsHtml.dll
  • CopySourceAsHtml.dll.config
사용법은 Addins에 등록한 후 IDE를 실행하고 소스코드 창에서 HTML로 내보내길 원하는 범위를 선택하고 마우스 오른쪽 키를 눌러 컨텍스트 메뉴를 열어보면 Copy as HTML... 이라는 메뉴가 보입니다.
사용자 삽입 이미지

선택하면 다음과 같은 옵션 설정창이 나오고 원하는대로 적절히 설정한 후 [OK]를 누르면 클립보드에 해당 내용이 HTML코드로 복사되어 있습니다.
사용자 삽입 이미지

CSAH의 장점을 꼽아보자면,
  • VS IDE에 통합!
    VS IDE에 애드인으로 통합되어 있어 편리합니다. 단지 원하는 부분을 선택하고 컨텍스트 메뉴에서 클릭만 하면 되니까요.
  • 줄번호 붙임을 선택적으로 사용 가능
    줄번호 표시를 옵션으로 선택할 수 있습니다. Copy&Paste용과 설명을 위한 리스팅용으로 유용하게 사용할 수 있습니다.
  • IDE의 컬러링을 그대로 재현
    VS의 애드인으로 별도의 컬러링 루틴을 사용하는게 아니라 보여지는 그대로를 표현합니다.

반면에 단점을 얘기하자면,

  • VS 2003과 2005에서만 사용가능
    다른데서 작성한 코드를 컬러링하려면 일단 VS IDE를 실행하고 코드를 복사하고 해당 코드 형식으로 저장해야 합니다.
  • 브라우저에서 코드를 복사하여 IDE에 붙여넣으면 개행이 2줄씩 들어감
    CSAH가 만들어낸 HTML 코드를 보면 개행에 <P>태그를 사용하고 있습니다. 브라우저에서 볼 때야 보기 좋지만 복사해서 붙여넣으면 <P>태그는 개행을 2줄하게 되어 별도의 편집이 필요하죠.

그 외에 먼저 얘기 한 바와 같이 VS 2005 IDE코드를 그대로 복사하므로 탭문자가 표현되지 않습니다. 실제로 HTML을 보면 간격조정에  를 사용하고 있는데 이건 좀 곤란하죠. 또 각 행마다 스타일이 따로 지정되어 있는데, 워드 코드 보다야 덜 복잡하지만 행이 길어질수록 코드량이 엄청나게 길어질 것입니다.

▶줄번호를 붙인 예제(C#)


▶줄번호를 붙이지 않은 예제(C#)


오랫만에 자바스크립트를 수정하느라 하루동안 삽질도 많이 했지만 좋은 코드를 얻게 되어서 너무 즐겁네요. :)
신고
Posted by gongdo


티스토리 툴바