신규하 블로그 :: SyntaxHighlighter 2.X를 tistory에 적용하기.

2009/02/27 15:37

SyntaxHighlighter 2.X를 tistory에 적용하기. Programming2009/02/27 15:37

1. SyntaxHighlighter 설치하기.

syntaxhighlighter를 tistory에서 사용 하는 방법을 포스팅 하고 나서.. 2.0.287 최신 버전이 나와서... 새로운 버전을 사용하는 방법을 올려 보려고 합니다.

버전이 올라 가면서 설치 하는 방법이 조금 바뀌고 사용법도 약간 변경 되었습니다. 1.5.XX버전을 사용하시던 분들이 새로운 버전으로 바꾸면서 이전에 코드를 표시 했던것을 새로운 표시 방법 고쳐 줘야 하는 난감한 사태가 발생하게 됩니다.
이런 아픔을 참고 견딜만 하다면, 새로운 버전으로 올려 보시는 것도 나쁘지 않을 듯 싶습니다.
저 같은 경우에는 막상 사용한게 별로 없어서(^ ^;;;;).. 2.0으로 올려 봤습니다.

우선 소스를 다운로드 받습니다.
아래 주소로 가셔서 최신 버전을 받으시면 됩니다.

http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download

이 포스팅에서 사용한 버전은 2.0.287입니다. 이 파일을 받고 싶으신 분은 아래에서 받으시면 됩니다.

syntaxhighlighter_2.0.287.zip

받으신 파일의 압축을 푸시면 아래와 같은 경로가 나옵니다.

이 경로 src를 제외한 scripts와 styles의 하위에 있는 파일들을
관리자 화면 > 스킨 > HTML/CSS편집 > 파일 업로드에서 파일 업로드를 통해서 모두 올려 줍니다.

올리면 아래와 같은 파일들이 추가 되게 됩니다.

clipboard.swf
help.png
magnifier.png
page_white_code.png
page_white_copy.png
printer.png
shBrushBash.js
shBrushCSharp.js
shBrushCpp.js
shBrushCss.js
shBrushDelphi.js
shBrushDiff.js
shBrushGroovy.js
shBrushJScript.js
shBrushJava.js
shBrushPhp.js
shBrushPlain.js
shBrushPython.js
shBrushRuby.js
shBrushSql.js
shBrushVb.js
shBrushXml.js
shCore.css
shCore.js
shLegacy.js
shThemeDefault.css
shThemeDjango.css
shThemeEmacs.css
shThemeFadeToGrey.css
shThemeMidnight.css
shThemeRDark.css
wrapping.png

추가 된 것을 확인 하시면,
관리자 화면 > 스킨 > HTML/CSS편집 > HTML/CSS편집에서 <title> 밑에 아래 코드를 추가해 줍니다.

여기까지 하면 설치는 완료가 됩니다.
이전보다 간편해 졌죠?
그리고 참고로, scrips에서 .js파일들이 있는데 shCores.js는 꼭 있어야 합니다. 그리고 나머지 .js파일은 자신이 주로 사용하는 언어를 추려서 넣어 주시면 됩니다.
모두 넣어도 상관은 없지만.. 조금 느려지겠죠? ^^;

2. SyntaxHighlighter 사용하기.

이제는 사용방법입니다.
예전에는 textarea테그로 사용하는 방법을 지원 했지만, 이번 버전 부터는 pre테그만을 지원합니다.

<pre class="brush: c">
... some code here ....
</pre>

pre에 class를 지정하고 여기에 brush로 지정해 주면 됩니다.
코드에 따라 아래와 같은 유형으로 넣어 주시면 됩니다.

Brush name	Brush aliases	File 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
Groovy	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