블로그에 소스코드 입력을 해보자.

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

  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에 다음항목 추가
<link rel="stylesheet" type="text/css" href="./images/SyntaxHighlighter.css"/>
다음으로 제일 마지막 부분에 다음 항목을 추가한다.

<!-- code for syntaxhighlight --> <script class="javascript" src="./images/shCore.js"></script> <script class="javascript" src="./images/shBrushCpp.js"></script> <script class="javascript" src="./images/shBrushCSharp.js"></script> <script class="javascript" src="./images/shBrushCss.js"></script> <script class="javascript" src="./images/shBrushDelphi.js"></script> <script class="javascript" src="./images/shBrushJava.js"></script> <script class="javascript" src="./images/shBrushJScript.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> <!-- code for syntaxhighlighter -->

  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

---

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

<textarea name="code" class="language">

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

요렇게 하고 저장해주시면

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

---

참고사항 :

• 티스토리에서 인용 코드 예쁘게 넣기, GROWING ME
• 블로그에 소스 코드 넣기, 하늘다래
• dp.SyntaxHighlighter를 이용한 코드 하이라이트, Pupustory