[JavaScript][tip] SyntaxHighlighter를 이용해서 티스토리에 개발코드 작성하기

SyntaxHighlighter를 사용하면 자신의 블로그에 개발 코드를 보기 좋게 기록해둘 수 있다.

하여튼 다운받고 압축풀고 예제를 참조하면 사용법은 바로 파악이 된다.

티스토리에서 설정은 아래 2가지만 하면 된다.

1. 필요한 파일(대략 아래 리스트들)을 관리->스킨->HTML/CSS 편집->파일업로드를 통해 업로드를 한다.

• /images/shCore.js
  /images/shBrushBash.js
  /images/shBrushCpp.js
  /images/shBrushCSharp.js
  /images/shBrushCss.js
  /images/shBrushDelphi.js
  /images/shBrushDiff.js
  /images/shBrushGroovy.js
  /images/shBrushJava.js
  /images/shBrushJScript.js
  /images/shBrushPhp.js
  /images/shBrushPlain.js
  /images/shBrushPython.js
  /images/shBrushRuby.js
  /images/shBrushScala.js
  /images/shBrushSql.js
  /images/shBrushVb.js
  /images/shBrushXml.js

• /styles/shCore.css
  /styles/shThemeDefault.css

2. 관리->스킨->HTML/CSS 편집의 skin.html 영역에 아래와 코드를 추가해준다.

• <script type="text/javascript" src="./images/shCore.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/shBrushPlain.js"></script>
  <script type="text/javascript" src="./images/shBrushPython.js"></script>
  <script type="text/javascript" src="./images/shBrushRuby.js"></script>
  <script type="text/javascript" src="./images/shBrushScala.js"></script>
  <script type="text/javascript" src="./images/shBrushSql.js"></script>
  <script type="text/javascript" src="./images/shBrushVb.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.config.clipboardSwf = './images/clipboard.swf';
  	SyntaxHighlighter.all();
  </script>

티스토리의 스킨 관리 기능이 폴더까지 지정을 해줄수 없기 떄문에 image 폴더에 js가 들어가는 거슬림은 그냥 넘어가야 한다.

위와 같이 하면 모든 설정은 끝.
아래의 예제와 같이 사용하면 된다.

<pre class="brush:js">
function test() {
	alert(1);
}
</pre>

pre 태그의 brush에 사용할 수 잇는 코드는 다음과 같다.
사용하지 않는 언어 코드에 대한 js는 업로드를 하지 않아도 된다.

brush name	brush alias	js name
Bash/shell	bash, shell	shBrushBash.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
shBrushDiff.js	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js