허니몬의 IT 이야기
  블로그를 돌아다니다보면, 소스코드를 특별한 형식에 맞추어서 보여주는 것을 보고서는 훅~ 하고 필이 받은 덕분에 오늘에서야 소스코드를 넣는 시도를 하게 되었다. ^^

  1. http://code.google.com/p/syntaxhighlighter/ 으로 이동하여서 SyntaxHighlighter_1.5.1.rar을 다운받는다.
  2. SyntaxHighlighter_1.5.1.rar의 압축을 해제한다.

     1. 압축을 풀면 dp.SyntaxHighlighter 라는 폴더가 생긴다.
     2. 그 안에는 각각
Scripts(JavaScript 파일 및 swf 파일 존재), Styles(Css 파일이 존재함), Uncompressed 폴더가 있다.
  3. 관리자 페이지 > 스킨 > HTML/CSS편집 >파일업로드로 이동

     1. Styles\SyntaxHighlighter.css 파일을 업로드 한다.

     2. Scripts 폴더 안에 있는 모든 파일을 업로드 한다.

  4. 관리자 페이지 > 스킨 > HTML/CSS 편집 > skin.html에 다음항목 추가


다음으로 제일 마지막 부분에 다음 항목을 추가한다.


  5. 스킨을 저장한다.


여기까지 하면 필요한 작업이 완료되었습니다. SyntaxHighlighter를 사용하기 위해서는 <pre> 또는<textarea> 태그를 사용할 수 있는데 일반적으로 별도의 encoding 이 필요없는 textarea 가 더편리합니다. pre 를 사용하든지 textarea 를 사용하든지 class 이름만 적절하게 지정하면 이상 없이 잘 동작하고 언어 종류에 따른 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

출처 : http://shagall.tistory.com/327

사용 방법은 간단합니다. ^^


위의 소스파일을 HTML 소스 넣기로 해서 넣으면 됩니다. 저의 경우에는 서식형태로 해서 저장을 합니다.

요렇게 하고 저장해주시면
오른쪽에 보는 것처럼 '서식'란에 소스코드 입력하기 항목이 보이실 겁니다. 필요할 때마다 저걸 클릭해서 쓰기창에 띄우고 소스보기로 해서 class 부분만 적절하게 수정해주면 되겠습니다. ^^

참고사항 :