티스토리에서 Syntax Highlighter 3.0 사용하기

테터툴즈나 XE에서 사용하든 소스코드 하일라이터를 티스토리에서 사용하려고, 웹검색을 해보니 역시나 해결책이 있다는 내용!! :-)

먼저, 해당 스크립트 소스를 제공하는 사이트(http://alexgorbatchev.com/SyntaxHighlighter/)에서 파일을 다운로드 받는다.

syntaxhighlighter_3.0.83.zip

사용법은

여기(http://zoc.kr/970)

로 가서 확인한다. 그걸 보고 따라해봤더니, ^^ 잘된다.

적용했던 절차를 간략히 적어보면,...
압축파일을 풀어, 생성된 디렉토리들 중에서 scripts와 styles에 들어있는 파일들을 모두 티스토리에 업로드한다.

자신의 (티스토리) 블로그에 접속한 후, <관리자(admin)>메뉴로 들어가면 HTML/CSS 편집하는 화면에서 왼쪽 그림과 같은 화면을 찾을 수 있다.

여기에 파일을 올린다.

막상 올리게되면 '파일목록'에서는
images/shBrushSql.js와 같은 형태로 보여지게 된다. 즉, 디렉토리가 무조건 images로 된다는 것이다.

어쨋든 업로드되는게 다행이다. 안그럼 적용못할테니까.

브러시파일(shBrush로 시작하는 스크립트파일)은 자신이 필요하다고 생각하는 것만 올린다.

그 다음에는 skin.html 내에서 다음 라인을 찾는다.

<link rel="stylesheet" media="screen" type="text/css" href="./style.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/shBrushPerl.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushNasm8086.js"></script>
  
<link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css">
 
<script type="text/javascript">
//<![CDATA[
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
//]]>
</script>

마지막으로, 포스팅 글을 작성할때, HTML모드로 전환해서

<PRE class="brush:java"> 
코드
</PRE>

를 이용하면 된다.