블로그에 Systaxhighlighter 간단하게 적용하기.

블로그에 c, java, matlab 등 소스코드를 작성하여 올릴 때, 개인적으로 systaxhighlighter가 최고라고 생각한다.

SyntaxHighligher의 홈페이지는 아래와 같으며, 현재 3.0.83버전까지 나와있지만 업데이트가 더이루어질까는 의문이다...

http://alexgorbatchev.com/SyntaxHighlighter

1. 먼저 우측상단 다운로드페이지로가서 최신버전을 다운받거나 아래 링크를 통해 받은 후 압축을 풀어준다.

다운로드 링크 : http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current

2. 티스토리의 관리자페이지에서 꾸미기 - html/css 편집 - 파일업로드 탭으로 이동한다.

3. 우측하단의 추가버튼을 눌러서 scripts, styles 폴더내의 모든 파일을 올린다.

자신이 사용하는 언어와 스타일만 골라서 올려도 되긴하지만 복잡하므로 전부 업로드하였다.

4. html/css 탭에서 skin.html내에 아래를 복사하여 붙여넣고 반드시 저장버튼을 눌러준다!

<script type="text/javascript" src="./images/shCore.js"></script>

<script type="text/javascript" src="./images/shLegacy.js"></script>

<script type="text/javascript" src="./images/shBrushBash.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/shBrushDelphi.js"></script>

<script type="text/javascript" src="./images/shBrushDiff.js"></script>

<script type="text/javascript" src="./images/shBrushGroovy.js"></script>

<script type="text/javascript" src="./images/shBrushJava.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/shBrushPython.js"></script>

<script type="text/javascript" src="./images/shBrushSql.js"></script>

<script type="text/javascript" src="./images/shBrushXml.js"></script>

<link type="text/css" rel="stylesheet" href="./images/shCore.css">

<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">

<script type="text/javascript">SyntaxHighlighter.all();</script>

그림과 같이 </body></html> 위에 넣어야 한다. <title> 위에 넣어도 상관없다.

위의 빨간 하이라이트부분이 스타일을 결정한다. 스타일의 프리뷰 및 명칭은 아래 주소에서 볼 수 있다.

http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

5. 설정은 끝났다. 글쓰기에서 HTML을 체크하고

<pre class="brush:java;">

class  

{

public static void main(String[] args) 

{

System.out.println("Hello World!");

}

}

</pre>

이런 형식으로 쓰면

class  
{
	public static void main(String[] args) 
	{
		System.out.println("Hello World!");
	}
}

이렇게나온다!

마찬가지로 빨간 하이라이트는 사용하는 언어의 브러쉬를 나타내며

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

이곳에서 브러쉬의 명칭을 확인할 수 있다.

이 글을 보고 이해가 되지 않거나 부족하다 느낀다면

http://elgar328.tistory.com/11

에서 좀더 자세한 설명을 볼 수 있다.

또한 복잡하고 어렵다고 느껴지거나 네이버 등 다른 블로그라면 아래 주소를 살펴보기 바란다.

http://hilite.me/