일반적으로 html, css, js .... 등등 코드를 표시할때는 구문강조기능을 사용해서 표시하곤 합니다.
티스토리에서도 알고보면 많은 구문강조 기능을 이용할 수 있습니다.
이전에 쓴글을 보시면 어떤 구문강조기능 자바스크립트를 사용하면 될지 감이 오실겁니다.
반드시 참고사항을 읽어보시고 선택하시기 바랍니다.

오늘은 구문강조기능을 사용하는 자바스크립트를 사용할때 또는 그냥 사용할때등 언제나 티스토리 본문에 티스토리 치환자를 표시할 수 있는 방법을 알려드리겠습니다. 


구문강조하는 자바스크립트를 사용한다면 그 코드 앞에 아래의 코드를 적어주시기 바랍니다.
아래의 코드를 </head> 위나 </body> 위에 넣어주세요.

<script type="text/javascript">
(function () {
    function hashReplace(string) {
        return string.replace(/\[#\#/g, '[##').replace(/<br\s*\/?>|&lt;br\s*\/?&gt;/gi, '');
    } 
    var pres = document.getElementsByTagName('pre'),
        count = pres.length,
        pre;
 
    for (i = 0; i < count; i += 1) {
        pre = pres[i];
        pre.innerHTML = hashReplace(pre.innerHTML);
    }
})();
</script>

위의 코드는 pre 태그를 사용할때 #\### 으로 표시하며, 티스토리 버그인 줄바꿈 태그 자동삽입기능인 <br /> 태그를 삭제하는 내용입니다.
고로 pre 태그를 사용하면서 편집기에서 html체크를 했다 껏다 해도 자동으로 br 태그를 삭제합니다. 테스트해보세요.

위의 코드를 삽입한 다음 아래의 방법대로 사용하시면 됩니다.
글작성 하실때 html 에 체크한후에 <pre>를 정상적으로 적어줍니다.

티스토리 치환자 표시 1


그다음 html을 체크 해제 합니다.

티스토리 치환자 표시 2


pre 내용이라고 적은것은 html 체크해제한 다음 보여지는 부분을 말합니다. 
그 부분을 블럭을 잡고(마우스로 드레그) 해당 코드를 넣어줍니다.
넣을때 치환자가 있으면 ## 사이에 \를 넣어둡니다. 아래그림 참고

티스토리 치환자 표시 3


그럼 아래처럼 정상적으로 치환자가 표시됩니다.
아래의 경우는 구문강조기능을 이용하기 때문에 이렇게 보입니다.

티스토리 치환자 표시 4



위의 코드는 doctype 와 상관없이 html5에서도 정상작동함을 알려드립니다.

도움 주신 분



댓글

  1. 2012.01.02 21:20 신고 BlogIcon 워크뷰  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다^^