티스토리 치환자 본문에 표시하는 방법

demun
퍼블리셔/기술
2012. 1. 2. 19:02

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

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

온라인 구문강조

온라인 구문 강조 - 설치없이 구문강조하고 티스토리 치환자 표시하는 방법
티스토리 구문강조(코드하이라이팅)하는 4가지 방법

구문강조하는 자바스크립트를 사용한다면 그 코드 앞에 아래의 코드를 적어주시기 바랍니다.
아래의 코드를 </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