스프링노트를 애용하는 한 사람으로서, 그림 리사이즈를 했을 때 익스플로러의 메모리 사용량이 1G를 훌쩍 넘어가는 버그를 참지못하고 결국 파이어폭스로 옮겨탔습니다. ㅜ_ㅜ... 그런데 신기한 것은 파이어 폭스랑 익스플로어랑 화면이 좀 다르게 표시되는 군요. 특히 테두리 굵기(Border) 같은 경우는 많이 차이가 납니다.
순간 웹프로그래머들이 얼마나 고생하는지 알 것 같더군요. 제가 웹 프로그래머가 아니라는 것이 정말 다행이라 생각합니다. 수많은 브라우져들을 다 테스트하면서 정상적으로 표시되는지 확인할 생각을 하니... 아우... ㅜ_ㅜ...
파이어폭스가 익스플로어보다 빠르다는 이야기를 좀 듣는데... 실제로 그렇게 빠른지는 모르겠지만 자바스크립트쪽은 조금 더 빨리 로딩되는 듯하게 보이는군요. ^^
양치질 하다가 문득 아이디어가 떠올라서 테스트 코드를 작성해 봤는데, 괜찮게 동작해서 팁으로 올립니다. ^^ (양치질 하다가 떠오르다니... 약간 문제가 있다고 생각되네요.. ㅡ_ㅡa.. 코딩을 좀 쉬어야 할지도...)
아이디어는 간단합니다. 스프링노트에서 보낸 코드는 OL 태그와 함께 class 속성으로 code를 담고 있습니다. 즉 아래와 같이 되어있다는 것이지요. ^^
<ol name=code>
코드....
</ol>
이것을 자바 스크립트를 이용해서 class 속성은 cpp와 같은 언어 타입으로 바꿔 넣어주고, name 속성을 추가해주면 나머지는 Syntax Highlighter가 알아서 해줍니다. 물론 ol 태크가 먹도록 수정된 Syntax Highlighter가 있어야 한다는 전제가 있습니다. ^^;;;;
shCore.js 파일을 수정하면 되는데 수정할 부분은 아래와 같습니다.
FindTagsByName(elements,name,'pre');
FindTagsByName(elements,name,'textarea');
FindTagsByName(elements,name,'ol'); // 추가 //highlighter.Highlight(element[propertyName]));
highlighter.Highlight(element[propertyName].replace( /
/gi, '\n').replace(/<\/?[^>]+>/gi, '')); // 이렇게 수정
(첨부 파일로도 올려놨습니다. ^^;;;)
<!-- kkamagui 추가 Syntax Highliter -->
<script class="javascript">
<!-- kkamagui 추가 Stringnote 지원 -->
var tags = document.getElementsByTagName( 'ol' )
for( var i = 0 ; i < tags.length; i++ )
{
if( tags[ i ].attributes['class'].value == 'code' )
{
// cpp로 일단 고정함
tags[ i ].attributes['class'].value = 'cpp';
tags[ i ].setAttribute( 'name', 'code' )
}
}
</script>
위 코드를 "관리자"->"스킨편집"->"HTML/CSS 편집"으로 가셔서 <script class="javascript" src="./images/shCore.js"> 앞에 붙여넣으시면 됩니다.
얼마전부터 구글 문법 하일라이터(Syntax Highlighter)를 티스토리에 적용해서 사용하고 있습니다. Syntax Highlighter에 대한 내용은 http://kkamagui.tistory.com/notice/28 에서 볼 수 있습니다. 이것을 사용하면 코드가 예쁘게 나오는 것은 물론이고 붙여넣기 및 출력도 지원하기때문에 상당히 편리한데, 문제가 하나 있습니다.
티스토리만 사용한다면 큰 문제가 안되겠지만 저같이 스프링노트와 티스토리를 같이 사용하는 사람에게는 거의 무용지물입니다. 개발하면서 주로 로그를 남기고 코드를 붙여넣는 것은 티스토리가 아니라 스프링노트쪽이고, 티스토리는 개발이 완료되었을 때 스프링노트의 보내기 기능을 써서 포스팅합니다.
이렇게 되면 스프링노트가 코드를 보낼 때 아래와 같이 OL 태그를 써서 보내게 되는데, 그 안에는 각종 HTML 태그들과 함께 인코딩된 형태로 코드가 뒤섞여있습니다.
<OL class=code>
<LI><textarea name="code" class="cpp" cols="60" rows="10"><br />... some code here ...<br /></textarea><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 편집 모드로 변경합니다.
HTML 수정 모드로 변경
그후 "OL class=code" 를 찾아서 "OL name=code class=cpp" 와 같은 형식으로 수정합니다.
수정 전수정 후
그리고 저장 버튼을 누른 후 해당 페이지로 이동해서 Control + F5를 눌러 캐쉬된 내용과 관계없이 화면을 갱신하면 아래와 같이 Syntax Highlight가 적용된 코드를 볼 수 있습니다. ^^
적용된 화면
수정한 shCore.js 파일을 첨부해 놓았으니 필요하신 분은 다운 받아서 바로 적용하시면 됩니다. 문제를 해결할 수 있게 도움을 주신 강규영 님께 거듭 감사드립니다. ^ㅡ^)/~
제 블로그는 http://code.google.com/p/syntaxhighlighter/ 에서 제공하는 Syntax Highlighter를 사용하고 있습니다. 페이지 로딩 속도가 조금 느리다는 단점이 있지만 코드를 예쁘게 보여줄 수 있다는 장점때문에 사용하고 있는데요, 한가지 아쉬운 점은 스프링노트에서 보낸 코드가 적용이 안된다는 점입니다.
이참에 한번 적용해보고 싶어서 자바 스크립트 책을 한권 옆에 끼고, 차근 차근 분석을 시작했는데 쉽지 않더군요. 일단 스프링노트에서 보낸 코드를 티스토리로 보내서 소스보기를 하니 아래와 같이 코드가 나왔습니다.
<OL class=code> <LI><textarea name="code" class="cpp" cols="60" rows="10"><br />... some code here ...<br /></textarea><br /></LI></OL>
일단 < 기호와 > 기호가 인코딩 되어있고 OL 태그로 둘러싸져있더군요. 갑자기 든 생각이 자바스크립트를 이용해서 위 태그를 Syntax Highlighter에서 인식할 수 있는 <textarea> 태그로 바꿔주면 간단히 해결할 수 있을 듯 싶어서 살짝 바꿔봤더니 뒤에 <br/>가 그대로 출력되더군요. ㅜ_ㅜ..
결국 하려면 인코딩된 태그를 다 살려주고 <br/> 같은 것은 개행문자로 바꿔주고 등등의 일을 해야할 듯한데... 자바 스크립트는 오늘부터 본지라 중도 포기... ㅜ_ㅜ...
스프링노트에 플러그인이 나올때까지 기다리던가 해야겠군요. ㅜ_ㅜ... 흑흑... 역시 프로그래밍은 쉽지 않은 것 같습니다.
shCore.js
