블로그에 소스에 대한 설명을 추가하는 작업은 블로그 작성 작업 중 가장 귀찮은 일이다. 이러한 일을 쉽게 해주기 위해서 Google에서 공개한 SyntaxHighlighter을 사용해 보겠다.

먼저 SyntaxHighligher을 다운로드 받는다.
http://code.google.com/p/syntaxhighlighter/

사용자 삽입 이미지

다운 받은 파일을 풀면 CSS와 JavaScript으로 구성되어 있는 것을 확인할 수 있다. 이 파일을들 tistory에 올리는 작업을 진행하면 된다.

Admin페이지에 로그인한 다음 스킨페이지에서 직접 올리기를 선택한다.
사용자 삽입 이미지

아래쪽에 있는 파일 업로드를 선택한다.
사용자 삽입 이미지

SyntaxHighlighter.css를 추가한다.
사용자 삽입 이미지

Scripts폴더에 있는 모든 JavaScript파일을 업로드한다.
사용자 삽입 이미지

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="javascript">
dp.sh.Toolbar.Commands = {
 ExpandSource: {
  label: '+ expand source',
  check: function(highlighter) { return highlighter.collapse; },
  func: function(sender, highlighter)
  {
   sender.parentNode.removeChild(sender);
   highlighter.div.className = highlighter.div.className.replace('collapsed', '');
  }
 },
</textarea>

다음과 같이 화면에 표시된다.


pre를 이용하는 경우는 다음과 같다.
<pre name="code" class="javascript">
dp.sh.Toolbar.Commands = {
 ExpandSource: {
  label: '+ expand source',
  check: function(highlighter) { return highlighter.collapse; },
  func: function(sender, highlighter)
  {
   sender.parentNode.removeChild(sender);
   highlighter.div.className = highlighter.div.className.replace('collapsed', '');
  }
 },
</pre>

dp.sh.Toolbar.Commands = {
	ExpandSource: {
		label: '+ expand source',
		check: function(highlighter) { return highlighter.collapse; },
		func: function(sender, highlighter)
		{
			sender.parentNode.removeChild(sender);
			highlighter.div.className = highlighter.div.className.replace('collapsed', '');
		}
	},
Posted by thinknote