스프링 노트에서 보낸 코드 자동으로 문법 하일라이팅(Syntax Highlight) 하기

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

(첨부 파일로도 올려놨습니다. ^^;;;)

shCore.js

<!-- 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"> 앞에 붙여넣으시면 됩니다.
 
 스프링노트와 티스토리를 연동하는게 점점 편리해 지는군요. ^^ 티스토리 만세~!!!