SyntaxHighlighter 2.X를 tistory에 적용하기.

http://gyuha.tistory.com/225 에서 가지고 온 내용.

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편집 > 파일 업로드에서 파일 업로드를 통해서 모두 올려 줍니다.

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

01.clipboard.swf

02.help.png

03.magnifier.png

04.page_white_code.png

05.page_white_copy.png

06.printer.png

07.shBrushBash.js

08.shBrushCSharp.js

09.shBrushCpp.js

10.shBrushCss.js

11.shBrushDelphi.js

12.shBrushDiff.js

13.shBrushGroovy.js

14.shBrushJScript.js

15.shBrushJava.js

16.shBrushPhp.js

17.shBrushPlain.js

18.shBrushPython.js

19.shBrushRuby.js

20.shBrushSql.js

21.shBrushVb.js

22.shBrushXml.js

23.shCore.css

24.shCore.js

25.shLegacy.js

26.shThemeDefault.css

27.shThemeDjango.css

28.shThemeEmacs.css

29.shThemeFadeToGrey.css

30.shThemeMidnight.css

31.shThemeRDark.css

32.wrapping.png

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

scripts 폴더의 내용과 styles 관련된 내용을 복사한다. 

<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();

주의를 해서 넣기 바란다.

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

---

2. SyntaxHighlighter 사용하기.

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

1.<pre class="brush: c">

2.... some code here ....

3.</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

좀 더 자세한 옵션을 알고 싶으시면, 아래 페이지를 참고 하세요.

• http://alexgorbatchev.com/wiki/SyntaxHighlighter:Usage

이제 편집을 하는 방법입니다.
tistory에서는 edit상에서 편집을 하게 되면, 입력한 값이 그래도 나오지 않게 됩니다. 이 상에서 편집기 우측 상단의 HTML 체크 박스를 살짝 눌려 주고... 직접 코드로 입력해 주시면 됩니다.

좀 더 상세한 설명은 홈페이지를 참고 하세요~ ^^*

테스트 한번 해보자. 

1. 원하는 위치를 선택하고, tistory의 경우에는 상단 오른쪽에 HTML을 체크하고 다음의 코드를 넣는다. 

<pre class="brush: c">

test

</pre>

2. 실행 결과 

main()
{
   printf("test");
}

tistory에서는 코드 넣는 것이 조금 불편하지만, 보이는 가독성은 매우 높아 질 듯 하다.