TISTORY Syntax Highlighter 설치

TISTORY Syntax Highlighter 설치

Syntax Highlighter은 소스코드 예쁘게 보이도록 꾸며주는 오픈소스 스킨입니다.

일단 티스토리는 Syntax Highlighter를 제공하지 않아서 스킨을 수정하여 적용하면 사용 가능합니다.

소스 홈페이지 : http://alexgorbatchev.com/SyntaxHighlighter/ (오픈소스로 제공되어 누구나 사용 가능)

1. 설치방법

설정 - 스킨 - HTML/CSS 편집 들어간 후, </body>와 </html> 사이에 다음 내용을 추가해 준다.

<link rel='stylesheet' type='text/css' href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' />

<link rel='stylesheet' type='text/css' href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.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/shBrushXml.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/shBrushPhp.js' type='text/javascript'></script>

<script type="text/javascript">

SyntaxHighlighter.all();

</script>







2. 사용방법

우선 편집기에서 소스를 쭉 작성한다. < 를 &lt; 로 작성해야 하는데, 이건 티스토리 편집기에서 자동으로 치환해 준다.
그리고 HTML 모드에서 위아래를 <pre> - </pre> 태그로 묶어주는데, 코드 종류에 따라 태그 클래스를 미묘하게 바꿔줘야 한다.

CPP 코드 : <pre class="brush: cpp"> - </pre>

HTML : <pre class="brush: html"> - </pre>

PHP : <pre class="brush: php"> - </pre>










정확하게는 위에서 추가해 준 브러시 타입만 사용할 수 있다. 저 위 소스 잘 보면 shBrush___.js 를 삽입하는걸 볼 수 있는데 이 부분.
다른쪽(Ruby라거나...) 쓰는 블로그라면 알아서 홈페이지 뒤져서 바꿔주면 되겠다.
(설마 코드 다루는 블로그 주인장이 저 정도 응용력도 없진 않겠지...)







파이어폭스 사용시, 코드 뒤에 <br /> 붙는건 지워줘야 한다. 아니면 아래처럼 소스에 한 줄 추가해주면 알아서 삭제하고 파싱해 준다.




<script type="text/javascript">

SyntaxHighlighter.config.stripBrs = true;

SyntaxHighlighter.all();

</script>







3. Include 부분은 아래와 같이 입력 해준다.




#include &lt;stdio.h&gt;

끝!