SyntaxHighlighter 사용하기

다운로드 : http://code.google.com/p/syntaxhighlighter/
참고: http://heisencoder.net/2009/01/adding-syntax-highlighting-to-blogger.html

PC 에 파일 압축을 푼다.
우선 public 사이트가 필요하며 SyntaxHighlighter 를 사용하려는 사이트는 html 편집이 가능해야 한다.
내 경우 구글의 사이트 도구를 이용해 필요한 파일을 업로드 하였고 blogspot 에 SyntaxHighlighter 를 사용하였다.

파일 업로드

• sites.google.com 에 접속한다.
• 필요하면 계정을 만든다.
• 사이트를 만든다.
• 메뉴편집으로 들어간다.
• 첨부파일로 들어간다.
• 아래 파일들을 업로드한다.
• SyntaxHighlighter.css (필수)
• shCore.js (필수)
• shBrush*.js (* 은 사용하고자 하는 언어, 선택 가능)

사용하기

• blogspot 의 꾸미기로 들어간다.
• html 편집으로 들어간다.
• header 부분에 다음과 같이 추가한다. (사이트명을 자신의 사이트명으로 수정한다)
• <link href='http://sites.google.com/site/사이트명/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
• <script language='javascript' src='http://sites.google.com/site/사이트명/shCore.js'/>
• <script language='javascript' src='http://sites.google.com/site/사이트명/shBrushJava.js'/>
• <script language='javascript' src='http://sites.google.com/site/사이트명/shBrushJScript.js'/>
• <script language='javascript' src='http://sites.google.com/site/사이트명/shBrushXml.js'/>

• 저장한다.
• 글쓰기로 들어간다.
• SyntaxHighlighter 를 적용하고 싶은 구간을 아래와 같이 처리한다.
• &lt;pre class="java" name="code"></pre>
• class 에 적용할 언어를 입력하고 name 은 반드시 code 라고 입력한다.
• </body> 이전에 다음을 추가한다.

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

확인해 보자.

주의사항

• blogspot 에서 글 수정할 때 HTML 편집모드에서 저장하지 않은 경우 SyntaxHighlight 적용한 코드들이 한줄로 표시될 수도 있다.