양치질 하다가 문득 아이디어가 떠올라서 테스트 코드를 작성해 봤는데, 괜찮게 동작해서 팁으로 올립니다. ^^ (양치질 하다가 떠오르다니... 약간 문제가 있다고 생각되네요.. ㅡ_ㅡ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>&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 편집 모드로 변경합니다.

사용자 삽입 이미지
HTML 수정 모드로 변경

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

사용자 삽입 이미지
수정 전
사용자 삽입 이미지
수정 후

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

사용자 삽입 이미지
적용된 화면

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

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

 티스토리로 옮겨오고나서 제일 좋은 점이 자바 스크립트가 먹는다는 것입니다. ^^ 아는 후배가 티스토리로 옮겨오자마자 문법 하일라이트(Syntax Highlight)를 해주는 자바 스크립트를 올렸더군요(어찌나 기특하던지 ㅎㅎ). 자바 스크립트 소스코드는 http://code.google.com/p/syntaxhighlighter/ 에서 받을 수 있습니다.

 소스코드를 올리면 아래와 같이 이쁘게 나옵니다. ^^;;;


 방법은 html 모드로 전환한 뒤 아래와 같이 쓰거나


 아래와 같이 사용하면 됩니다. ^^


 자세한 설치 방법은 아래의 사이트를 참고하시면 됩니다. ^^
원문 : http://gyuha.tistory.com/?_best_tistory=best_blogger3


ps) javascript 파일을 모두 하나로 뭉쳐서 shTotal.js 파일로 만든다음 </body> 바로 위에 아래와 같이 넣어도 된다.


+ Recent posts