(구문강조) 티스토리에 SyntaxHighlighter 3.0 적용하기

본문에 소스를 첨부할 때 텍스트로만 보여지던 것을
구문별로 강조하고
라인 번호를 추가하고
복사, 인쇄를 할 수 있도록 해줍니다.

링크로 연결하기
항상 최신 버전의 SyntaxHighlighter 서비스를 이용할 수 있습니다.

HTML/CSS 편집 페이지에서 HTML HEAD에 아래 소스를 추가합니다.

필요 없는 구문의 JS 파일은 삭제해도 됩니다.
구문별 JS 파일 보기
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes

CSS파일로 테마를 변경할 수 있습니다.
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Themes:Default

직접 설치하기
구문 강조할 항목을 추가하려면 JS 파일을 편집해서 업로드 하면 됩니다.

최신버전 내려받기
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download

압축을 풀고 scripts, styles 폴더에 있는 파일을 업로드 합니다.

그 다음 위 소스에서 http://alexgorbatchev.com/pub/sh/current/scripts 경로를 ./images/로 변경한 다음 HTML에 붙여넣으면 됩니다.

<link type="text/css" rel="stylesheet" href="./images/shCore.css"/>
<link type="text/css" rel="stylesheet" href="./images/shThemeSimulz.css"/>
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript">
    SyntaxHighlighter.config.tagName  = 'textarea';
    SyntaxHighlighter.defaults['auto-links'] = false; 
    SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
    SyntaxHighlighter.all();
</script>

사용하기
아래 코드를 HTML편집기에 붙여넣고 서식으로 저장하면 언제든지 꺼내쓸 수 있습니다. 스타일을 알맞게 편집하세요

종류별로 서식으로 저장 후

편집 중일 때는 다음과 같이 보입니다.

구글 애드센스 광고가 가려질 때
광고를 최상위로 보이도록 CSS를 편집하면 됩니다.

CSS에서

HTML에서

<div class="ad_right"><script type="text/javascript">구글애드센스코드</div>
            
            <div style="text-align : center; margin:50px 0;">
  <ins class="kakao_ad_area" data-ad-unit="DAN-nRFiQiN4avFYIKbk"></ins>
  <script async="" type="text/javascript" charset="utf-8" src="//t1.daumcdn.net/kas/static/ba.min.js"></script>
</div>

<div class="revenue_unit_wrap">
  <div class="revenue_unit_item adsense responsive">
    <div class="revenue_unit_info">반응형</div>
    <script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async="async"></script>
    <ins class="adsbygoogle" style="display: block;" data-ad-host="ca-host-pub-9691043933427338" data-ad-client="ca-pub-7938029191014931" data-ad-format="auto"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
  </div>
</div>

<div class="contents_style">본문에 소스를 첨부할 때 텍스트로만 보여지던 것을<br />
구문별로 강조하고<br />
라인 번호를 추가하고<br />
복사, 인쇄를 할 수 있도록 해줍니다.<br />
<br /><br />
<STRONG><SPAN style="FONT-SIZE: 12pt">링크로 연결하기</SPAN></STRONG><br />
항상 최신 버전의 SyntaxHighlighter 서비스를 이용할 수 있습니다.<br />
<br />HTML/CSS 편집 페이지에서 HTML HEAD에 아래 소스를 추가합니다.<br />

<DIV><TEXTAREA style="WIDTH: 100%; HEIGHT: 300px" class="brush: html;"><link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.tagName  = 'textarea';
SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>