블로그를 순회하다보면 가끔 포스트 하단에 각종 RSS의 구독 버튼이 달려있는 것을 쉽게 볼 수 있습니다. 어떻게 하는 것인지 궁금했는데, 오늘에서야 그 비밀을 알게 됬습니다. ^^)/~
사용자 삽입 이미지

RSS 리더 구독 권유 버튼


  "리플바" 라고하는 자바스크립트더군요. ^^ http://skin.repl.net/bookbar/index.html 에 가면 각 블로그 별로 추가할 수 있는 템플릿 코드를 생성해 줍니다. 제 블로그(kkamagui.tistory.com)을 넣어서 생성하니 아래와 같은 코드가 나오더군요.
사용자 삽입 이미지

리플바 사이트


 생성된 코드는 아래와 같습니다.

 위의 코드를 티스토리 스킨 편집에서 붙여넣으면 끝입니다. ^^ 방금 추가했는데, 아주 멋지군요. >ㅁ<)/~!!! 신나는 하루입니다. ^^;;;;

 양치질 하다가 문득 아이디어가 떠올라서 테스트 코드를 작성해 봤는데, 괜찮게 동작해서 팁으로 올립니다. ^^ (양치질 하다가 떠오르다니... 약간 문제가 있다고 생각되네요.. ㅡ_ㅡ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"> 앞에 붙여넣으시면 됩니다.
 
 스프링노트와 티스토리를 연동하는게 점점 편리해 지는군요. ^^ 티스토리 만세~!!!





 압축된 자바스크립트 소스를 예쁘게 복원시켜주는 사이트가 있네요. ^^ 안그래도 자바스크립트를 분석할일이 있었는데, 이것이 압축되어있어서 알아보기가 굉장히 힘들었습니다. ㅜ_ㅜ...


 위 사이트로 이동하면 아래와 같은 화면이 나옵니다. 위쪽의 에디트박스에 예쁘게 볼 소스코드를 붙여넣고 아래쪽의 "Beautify" 버튼을 누르면 코드가 예쁘게 변환되서 나옵니다.
사용자 삽입 이미지

압축된 자바스크립트 소스


사용자 삽입 이미지

예쁘게 수정된 자바스크립트 소스


 자바스크립트 소스 분석할때 아주 유용하게 쓸 수 있겠군요. ^^;;; 멋집니다. ^^)/~

 다음주 초까지 발표 자료를 만들어야되서 관련 문서를 읽고있는데, 영어에다가 도메인 영역이 병원이라서 이해가 쉽게 안됩니다. ㅜ_ㅜ.... 시간은 촉박하고 하고싶은 것은 많아서 몸이 근질 근질 거리고... 하루에도 몇번씩 자료를 놓았다가 다시 들었다가를 반복하네요 ^^;;;;

 티스토리로 블로그를 갈아타면서 자바스크립트와 HTML을 배워야겠다는 생각이 들었습니다. 그동안 이글루스나 네이버 블로그를 쓰면서 자바스크립트는 넣을 일이 없었기때문에 거의 모르고 지냈는데, 이번에 코드에 하일라이트를 넣는 자바스크립트 보니 상당히 강력하더군요.

 배울 것이 점점 늘어나서 좀 문제긴 하지만, 시간이 날때마다 조금씩 정리해서 올려야겠습니다. 일단 숙제부터 끝내놓구요~ ㅎㅎ

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

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


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


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


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


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


+ Recent posts