노무현 대통령 배너


2008. 5. 31. 01:11

구글 문법 하일라이터(Syntax Highlighter)를 패치하여 스프링노트 코드 지원하기

http://kkamagui.tistory.com/226

얼마전부터 구글 문법 하일라이터(Syntax Highlighter)를 티스토리에 적용해서 사용하고 있습니다. Syntax Highlighter에 대한 내용은 http://kkamagui.tistory.com/notice/28 에서 볼 수 있습니다. 이것을 사용하면 코드가 예쁘게 나오는 것은 물론이고 붙여넣기 및 출력도 지원하기때문에 상당히 편리한데, 문제가 하나 있습니다.

 티스토리만 사용한다면 큰 문제가 안되겠지만 저같이 스프링노트와 티스토리를 같이 사용하는 사람에게는 거의 무용지물입니다. 개발하면서 주로 로그를 남기고 코드를 붙여넣는 것은 티스토리가 아니라 스프링노트쪽이고, 티스토리는 개발이 완료되었을 때 스프링노트의 보내기 기능을 써서 포스팅합니다.

 이렇게 되면 스프링노트가 코드를 보낼 때 아래와 같이 OL 태그를 써서 보내게 되는데, 그 안에는 각종 HTML 태그들과 함께 인코딩된 형태로 코드가 뒤섞여있습니다.

<OL class=code>
<LI>&lt;textarea name="code" class="cpp" cols="60" rows="10"&gt;<br />... some code here ...<br />&lt;/textarea&gt;<br /></LI></OL>


 Syntax Highlighter를 사용하려면 TEXTAREA 태그나 PRE 태그를 사용해야하는데, OL 태그를 단순히 TEXTAREA 또는 PRE 태그로 교체하면 HTML 코드와 실제 내용이 어우러지는 아주 아름다운 코드를 보게 됩니다. ㅡ_ㅡ;;;;;;

 그래서 어제부터 Syntax Highlighter의 소스를 고쳐보려고 자바스크립트를 공부하기 시작했는데, 너무 코드가 어려워서 포기했다가 강규영 님의 도움을 받아 해결했습니다(강규영님께 감사드립니다. ^^).

 수정할 부분은 크게 두가지인데, 한가지는 shCore.js 파일을 수정하는 것입니다. shCore.js 파일의 내용중에 아래 부분을 간단히 수정한 뒤, "관리"의 "HTML/CSS 소스보기"로 가서 수정된 shCore.js 파일을 올리기만 하면 됩니다.

  1.  ... 생략 ...  
  2.  // 기존 코드 
  3.  FindTagsByName(elements, name, 'pre');  
  4.  FindTagsByName(elements, name, 'textarea');  
  5.  // kkamagui 추가, 아래 부분을 추가해 줍니다. 
  6.  FindTagsByName(elements, name, 'ol');  
  7.  
  8.  ... 생략 ...  
  9.  
  10.  // 기존 코드 
  11.  //highlighter.Highlight(element[propertyName]); 
  12.  // 수정된 코드 
  13.  highlighter.Highlight(element[propertyName].replace( /<br>/gi, '\n').replace(/<\/?[^>]+>/gi, ''));  
  14.  ... 생략 ...  


 위의 코드가 나오는 부분은 한군데 밖에 없으니 원본 파일은 백업하시고 과감히 수정하시면 됩니다.
 이제 남은 것은 스프링노트에서 보낸 글을 약간 손보는 것입니다. 스프링노트에서 보낸 글을 선택하여 수정모드로 갑니다. 수정모드에서 아래에서 보는 것과 같이 좌측 상단에 있는 "EDIT" 버튼을 눌러서 HTML 편집 모드로 변경합니다.

사용자 삽입 이미지

HTML 수정 모드로 변경

 그후 "OL class=code" 를 찾아서 "OL name=code class=cpp" 와 같은 형식으로 수정합니다.

사용자 삽입 이미지

수정 전

사용자 삽입 이미지

수정 후



그리고 저장 버튼을 누른 후 해당 페이지로 이동해서 Control + F5를 눌러 캐쉬된 내용과 관계없이 화면을 갱신하면 아래와 같이 Syntax Highlight가 적용된 코드를 볼 수 있습니다. ^^
사용자 삽입 이미지

적용된 화면


 수정한 shCore.js 파일을 첨부해 놓았으니 필요하신 분은 다운 받아서 바로 적용하시면 됩니다. 문제를 해결할 수 있게 도움을 주신 강규영 님께 거듭 감사드립니다. ^ㅡ^)/~

ps) 아래는 shCore.js 파일입니다.