SyntaxHighlighter 3.X를 tistory에 적용하기.

이전 버전을 계속 포스팅 했었는데, br태그가 이상하게 나온다거나.. tistory에서 사용 할 때 불편한 문제점들이 이것저것 있는데.. 아래 처럼 사용하면 좀 더 편하게 사용 할 수 있습니다. 먼저 최신 버전의 SyntaxHighlighter을 다운로드 받습니다. http://alexgorbatchev.com/SyntaxHighlighter/ 압축을 풀면 아래와 같이 보입니다. 여기서 scripts와 styles 폴더의 내용을 모두, 관리자 화면 > 스킨 > HTML/CSS편집 > 파일 업로드에서 파일 업로드를 통해서 올려 줍니다. 추가 된 것을 확인 하시면, 관리자 화면 > 스킨 > HTML/CSS편집 > HTML/CSS편집에서 밑에 아래 코드를 추가해 줍니다. <script type=..</p> </a> <div class="detail_info"> <a href="/category/Programming" class="link_cate">Programming</a> <span class="txt_bar"></span> 2010.12.13 18:27 </div> </div> </div> <div class="area_paging area_paging_list"> <span class="inner_paging"> <a href='/category/Programming?page=4' class="ico_skin link_prev ">이전</a> <a href='/category/Programming?page=1' class="link_page"><span >1</span></a> <a href='/category/Programming?page=2' class="link_page"><span >2</span></a> <a href='/category/Programming?page=3' class="link_page"><span >3</span></a> <a href='/category/Programming?page=4' class="link_page"><span >4</span></a> <a class="link_page"><span class="selected">5</span></a> <a href='/category/Programming?page=6' class="link_page"><span >6</span></a> <a href='/category/Programming?page=7' class="link_page"><span >7</span></a> <a href='/category/Programming?page=8' class="link_page"><span >8</span></a> <a class="link_page"><span >···</span></a> <a href='/category/Programming?page=13' class="link_page"><span >13</span></a> <a href='/category/Programming?page=6' class="ico_skin link_next ">다음</a> </span> </div> <div class="area_paging area_paging_simple"> <div class="inner_paging"> <a href='/category/Programming?page=4' class="link_prev "> <span class="ico_skin ico_prev"></span>이전 </a> <a href='/category/Programming?page=6' class="link_next "> 다음<span class="ico_skin ico_next"></span> </a> </div> </div> <div id="mEtc" class="wrap_etc"> <div class="inner_aside"> <!-- 최근에 올라온 글 --> <div class="box_aside"> <strong>최근에 올라온 글</strong> <ul class="list_board"> <li><a href="/528" class="link_board">Typescript에서 default im..</a></li> <li><a href="/527" class="link_board">세계 국기 SVG 파일</a></li> <li><a href="/526" class="link_board">웹 캐시를 지우고 리로딩하..</a></li> <li><a href="/525" class="link_board">Git에서 branch를 master로..</a></li> </ul> </div> <!-- 최근에 달린 댓글 --> <div class="box_aside"> <strong>최근에 달린 댓글</strong> <ul class="list_board"> <li><a href="/487#comment17191887" class="link_board">수정 해서 올려 드렸습니다....</a></li> <li><a href="/487#comment17189539" class="link_board">감사합니다. 혹시 맨 마지막..</a></li> <li><a href="/514#comment17187708" class="link_board">$ snap find <검색어> 또는..</a></li> <li><a href="/514#comment17187061" class="link_board">snap 에서 리그 오브 레전드가..</a></li> </ul> </div> <!-- 태그 클라우드 --> <div class="box_aside"> <strong>TAG</strong> <ul class="list_tag"> <li><a href="/tag/Eclipse" class="link_tag cloud3">Eclipse</a></li> <li><a href="/tag/Xcode" class="link_tag cloud2">Xcode</a></li> <li><a href="/tag/%EC%95%84%EC%9D%B4%ED%8F%B0" class="link_tag cloud3">아이폰</a></li> <li><a href="/tag/php" class="link_tag cloud2">php</a></li> <li><a href="/tag/cocoa" class="link_tag cloud3">cocoa</a></li> <li><a href="/tag/iphone" class="link_tag cloud1">iphone</a></li> <li><a href="/tag/%EA%B2%8C%EC%9E%84" class="link_tag cloud3">게임</a></li> <li><a href="/tag/Linux" class="link_tag cloud3">Linux</a></li> <li><a href="/tag/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D" class="link_tag cloud3">프로그래밍</a></li> <li><a href="/tag/Windows" class="link_tag cloud3">Windows</a></li> </ul> <a href="/tag" class="link_more">more</a> </div> <!-- 방문자수 --> <div class="box_aside lst"> <dl class="list_total"> <dt>Total</dt> <dd>1,637,330</dd> </dl> <dl class="list_visitor"> <dt>Today</dt> <dd>36</dd> </dl> <dl class="list_visitor"> <dt>Yesterday</dt> <dd>477</dd> </dl> </div> </div> </div> </div> </div> <hr class="hide"> <div id="dkFoot" role="contentinfo" class="area_foot"> Blog is powered by <em class="emph_t">Tistory</em> / Designed by <em class="emph_t">Tistory</em> </div> </div> <script src="https://tistory2.daumcdn.net/tistory/23651/skin/images/script.js"></script> <script> (function($) { $.Area.init(); })(jQuery); </script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-11467785-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <script type="text/javascript"> var _tiq = 'undefined' !== typeof _tiq ? _tiq : []; _tiq.push(['__setConfig', {enableScroll:true, enableClick:true, enableButton:true}]); _tiq.push(["__setParam", "svcdomain", "user.tistory.com"]); (function(d) { var se = d.createElement('script'); se.type = 'text/javascript'; se.async = true; se.src = location.protocol + '//m2.daumcdn.net/tiara/js/td.min.js'; var s = d.getElementsByTagName('head')[0]; s.appendChild(se); })(document); _tiq.push(['__setParam', 'param_ex', JSON.stringify({"userId":"26687","blogId":"23651","role":"guest","filterTarget":false})]); _tiq.push(['__trackPageview']); var addEvent = function (evt, fn) { window.addEventListener ? window.addEventListener(evt, fn, false) : window.attachEvent('on' + evt, fn); }; var removeEvent = function(evt, fn) { window.removeEventListener ? window.removeEventListener(evt, fn, false) : window.detachEvent('on' + evt, fn);}; var ua = navigator.userAgent.toLowerCase(); var isIOS = /iP[ao]d|iPhone/i.test(ua); var contentExStat = function() { _tiq.push(['__content', 't_content_ex', { 'data_type':'usage' }]); removeEvent(isIOS ? 'pagehide' : 'beforeunload', contentExStat); }; addEvent(isIOS ? 'pagehide' : 'beforeunload', contentExStat); </script> <script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || []; window.roosevelt_params_queue.push({channel_id: "dk", channel_label: 'tistory'});</script> <script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async></script><script type="text/javascript">if(window.console!=undefined){setTimeout(console.log.bind(console,"%cTISTORY","font:8em Arial;color:#EC6521;font-weight:bold"),0);setTimeout(console.log.bind(console,"%c 나를 표현하는 블로그","font:2em sans-serif;color:#333;"),0);}</script><iframe style="position:absolute;width:1px;height:1px;left:-100px;top:-100px" src="//gyuha.tistory.com/api" id="editEntry"></iframe><div class="layer_tooltip"> <div class="inner_layer_tooltip"> <p class="desc_g"></p> </div> </div><div id="tistoryEtcLayer" class="layer_post"></div><div id="tistorySnsLayer" class="layer_post"></div></body> </html>