1. What is SyntaxHighlighter?

SyntaxHighlighter is here to help a developer/coder to post code snippets online with ease and have it look pretty. It's 100% Java Script based and it doesn't care what you have on your server.

SyntaxHighlighter란 개발자와 코더가 온라인에 소스(프로그래밍)코드를 쉽고, 예쁘게 포스트 할 수 있도록 도와주는 도구이다. 순수 100% 자바스크립트로 만들어 져서 어떤 서버에서든 사용 가능하다. 라고 구글에 가보면 써 있다.

백문이불여일견 이라고 말로 하는 것 보다 한번 보는 게 낫듯 그림 첨부합니다.

2. How to install SyntaxHighlighter?

아래 주소에 가셔서 현재 최신 버전인 SyntaxHighlighter_1.5.1.rar를 다운 받습니다.
URL: http://code.google.com/p/syntaxhighlighter/
귀찮으신 분들께서는 아래 파일을 바로 받으셔도 됩니다.

다운받은 파일의 압축을 풀면 아래와 같이 3개의 디렉터리를 보실 수 있습니다.


Styles디렉터리는 에는 CSS파일이 위치해 있으며, Scripts, Uncompressed 에는 같은 내용의 자바스크립트가 들어 있습니다. 다른 점은 내용이 압축되어 있고 없고의 차이입니다.
사용 하실 때는 둘 중 하나를 선택해서 올리시면 됩니다. 개인적으로 Scripts에 위치한 파일을 올리시길 권장합니다. 압축이 되어 있기 때문에 페이지 로딩에 도움이 됩니다.

그리고 페이지 하단에 </body>태그 위에 아래 문장을 복사 해 줍니다.

여기서 포함하는 스크립트의 순서는 별 지장이 없습니다. 하지만, 가장 위에 있는 shCore.js 파일의 위치는 항상 위로 올라가야 정상적으로 동작하는 것만 주의해 주시면 됩니다.

<script class="javascript" src="./images/shCore.js"></script> <script class="javascript" src="./images/shBrushCSharp.js"></script> <script class="javascript" src="./images/shBrushCpp.js"></script> <script class="javascript" src="./images/shBrushCss.js"></script> <script class="javascript" src="./images/shBrushDelphi.js"></script> <script class="javascript" src="./images/shBrushJScript.js"></script> <script class="javascript" src="./images/shBrushJava.js"></script> <script class="javascript" src="./images/shBrushPhp.js"></script> <script class="javascript" src="./images/shBrushPython.js"></script> <script class="javascript" src="./images/shBrushRuby.js"></script> <script class="javascript" src="./images/shBrushSql.js"></script> <script class="javascript" src="./images/shBrushVb.js"></script> <script class="javascript" src="./images/shBrushXml.js"></script> <script class="javascript"> dp.SyntaxHighlighter.ClipboardSwf = './images/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script>

위와 같은 내용을 skin.html에 포함해 주었다면 설치는 끝났습니다.
그리고 이때 모든 .JS파일 을 포함 하실 필요는 없습니다. 사용자 분이 주로 사용하는 언어만 넣어 주셔도 됩니다. 그렇게 된다면 페이지 로딩시간도 단축 되리라 봅니다.
하지만 절대 shCores.js파일은 빼지 마세요. 이 파일이 없으면 동작 하지 않습니다.


3. How to use Syntaxhighlighte?

tistory에서 사용하기 위해서는 좀 귀찮습니다. 솔직히 기본 편집모드에서 편집하면서 사용하는 것은 거의 힘이 듭니다. 복사해서 붙여 넣기를 하는 방법으로 사용하시길 권장합니다.

먼저 사용하는 방법은 <pre>태그를 이용하는 방법과 <textarea>태그를 이용하는 2가지가 방법이 있습니다.

첫 번째로 <pre>태그를 사용하는 방법입니다.

<pre name="code" class="html">
... some code here ...
</pre>

Pre태그를 사용할 경우에는 <와 같은 html태그를 사용할 경우 &lt;와 같이 변환을 해서 사용해야 합니다. 태그가 좀 편하긴 하지만, 꺽쇠(<)태그로 인해서 귀찮은 경우가 있습니다.

다음으로 <textarea>태그를 사용하는 방법입니다.

... some code here ...

<textarea>태그로 쓸 경우 귀찮은 <를 &lt;로 변환 하지 않아도 됩니다.
못쓰는 경우는 내용물에 </textarea>를 쓰는 경우 빼고는 없습니다. 중간에 </textarea>를 쓰게 되면, 중간에 멈춰 버리게 되겠죠?
저 같은 경우에도 바로 위의 <textarea> 샘플의 경우 내용물에 </textarea>가 들어가야 해서 에는 <pre>태그를 사용해서 표현 했습니다.
꼭 한가지가 답은 아닌가 적당하게 섞어서 사용하시면 되겠습니다.
하지만, 특별한 경우가 아니면, <textarea>태그를 사용하는 것을 권장합니다.

여기서 class뒤에 넣은 형태는 아래 표의 명칭을 보시고 넣으시면 됩니다.

언어	명칭
C++	cpp, c, c++
C#	c#, c-sharp, csharp
CSS	css
Delphi	delphi, pascal
Java	java
Java Script	js, jscript, javascript
PHP	php
Python	py, python
Ruby	rb, ruby, rails, ror
Sql	sql
VB	vb, vb.net
XML/HTML	xml, html, xhtml, xslt

기본적이 사용법은 이렇게 이해 하시면 됩니다.

그런데, tistory에서 는 edit상태에서는 입력을 하시면 입력한 값이 그대로 나와 버리고 코드로 나오지 않습니다.

이럴 때는 edit모드 버튼을 눌러서 html모드로 편집해 주시면 됩니다.

편집 할 때 보기에는 별로 안 좋고 귀찮기는 하지만, 그래도 결과물이 잘 나오니까 걱정하지 마시고 쓰시면 됩니다.
그럼 잘 사용하세요~

ps. 좀더 상세한 사용법을 보려면 syntaxhighlighter 홈페이지를 방문해서 확인 하세요~

다른 곳의 내용을 참조해서 수정 하는 것도 한 세월 걸리는군ㅡㅡ; 이제 자야겠다.

참조 및 출처: http://gyuha.tistory.com/193