**블로그에 프로그래밍소스 삽입 테스트**

#1 단계

SyntaxHighligher 다운로드
http://code.google.com/p/syntaxhighlighter/

관리자 폐이지에서 - 스킨- 파일업로드 클릭.

파일업로드 클릭-

Styles 폴더에 있는 SyntaxHighlighter.css 파일 추가.

Scripts 폴더에 있는 모든 JavaScript 파일들 추가.

---

# 2 다음단계

HTML/CSS 편집에서 소스코드 추가.

HTML/CSS편집- skin.html

<link rel="stylesheet" type="text/css" href="./images/SyntaxHighlighter.css"/>

skin.html 페이지 끝으로 이동한 다음

<script class="javascript" src="./images/shCore.js"></script>
<script class="javascript" src="./images/shBrushCpp.js"></script>
<script class="javascript" src="./images/shBrushCss.js"></script>
<script class="javascript" src="./images/shBrushJScript.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>

위 코드 삽입.

---

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

사용법은 아래와 같이 소스코드를 삽입한다.

<TEXTAREA name="code" class="html">
<TABLE cellSpacing=0 cellPadding=0 width=300>
 <TBODY>
  <TR>
   <TD vAlign=top width=9><IMG height=9 src="http://toolbar.naver.com/images/titbar_ltop.gif" width=9> </TD>
   <TD width=300 background=http://toolbar.naver.com/images/titbar_bgtop.gif height=9></TD>
   <TD vAlign=top width=9><IMG height=9 src="http://toolbar.naver.com/images/titbar_rtop.gif" width=9> </TD>
  </TR>
  <TR>
   <TD background=http://toolbar.naver.com/images/titbar_l.gif></TD><TD height=124>8개 이미지로 처리 </TD>
   <TD background=http://toolbar.naver.com/images/titbar_r.gif></TD>
  </TR>
  <TR>
   <TD><IMG height=9 src="http://toolbar.naver.com/images/titbar_lbtm.gif" width=9> </TD>
   <TD background=http://toolbar.naver.com/images/titbar_bgbtm.gif height=9></TD>
   <TD><IMG height=9 src="http://toolbar.naver.com/images/titbar_rbtm.gif" width=9> </TD>
  </TR>
 </TBODY>
</TABLE>
</TEXTAREA>

<TABLE cellSpacing=0 cellPadding=0 width=300> <TBODY> <TR> <TD vAlign=top width=9><IMG height=9 src="http://toolbar.naver.com/images/titbar_ltop.gif" width=9> </TD> <TD width=300 background=http://toolbar.naver.com/images/titbar_bgtop.gif height=9></TD> <TD vAlign=top width=9><IMG height=9 src="http://toolbar.naver.com/images/titbar_rtop.gif" width=9> </TD> </TR> <TR> <TD background=http://toolbar.naver.com/images/titbar_l.gif></TD><TD height=124>8개 이미지로 처리 </TD> <TD background=http://toolbar.naver.com/images/titbar_r.gif></TD> </TR> <TR> <TD><IMG height=9 src="http://toolbar.naver.com/images/titbar_lbtm.gif" width=9> </TD> <TD background=http://toolbar.naver.com/images/titbar_bgbtm.gif height=9></TD> <TD><IMG height=9 src="http://toolbar.naver.com/images/titbar_rbtm.gif" width=9> </TD> </TR> </TBODY> </TABLE>

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