kkamagui의 작업실

얼마전부터 구글 문법 하일라이터(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 파일을 올리기만 하면 됩니다.

 ... 생략 ...

 // 기존 코드
 FindTagsByName(elements, name, 'pre');
 FindTagsByName(elements, name, 'textarea');

 // kkamagui 추가, 아래 부분을 추가해 줍니다.
 FindTagsByName(elements, name, 'ol');

 ... 생략 ...

 // 기존 코드
 //highlighter.Highlight(element\[propertyName\]);
 // 수정된 코드
 highlighter.Highlight(element\[propertyName\].replace( /<br>/gi, '\\n').replace(/<\\/?\[^>\]+>/gi, ''));
 ... 생략 ...

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

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

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

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

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

 아아... 이사가 너무 힘들군요. 스프링노트에서 적은 글을 다 티스토리로 보내랴, 스킨 고치랴 애드센스 붙이랴 ㅜ_ㅜ... 4일 정도를 그냥 날린 것 같습니다. 그래도 이사를 하고나니 흐믓한게 좋네요.
 
 이만하면 됬으니까 그만해야지 하면서도 계속 부족한 부분이 보이니 고치게 됩니다. 어쩔 수 없는 개발자인듯... ^^;;; 오늘은 이만하고 HTML 태그나 간단히 정리해야 겠습니다. 필요할때마다 검색해서 쓰고 잊어버리고 하니 영 불편하군요. 간단히 긁어붙여서 한 페이지 정도로 요약해야겠습니다.

 일요일 저녁인데, 오늘따라 왠지 정신이 맑지 못하군요. 뭔가 부족하고 멍한것이... 간만에 집에와서 그런지 영 적응이 안됩니다.

 하핫~ 그래도 역시 집이 최곱니다. ^^)/~ 다들 좋은밤 보내시길~