4
24
작성자:
RedPlus
2009-04-24 오전 4:49
개발자는 자신이 만들어 놓은 또는 남들이 만들어 놓은 코드 조각을 모으는 재미를 가지고 있다.
블로그 및 게시판에 소스 관리시 Visual Studio에서 보여지는 것처럼, 코드에 색상 입히기, 즉, Code Highlight 또는 Syntax Highlight 기능에 대해서 정리를 해볼까한다.
내가 상당한 기간동안 Code Highlight 기능을 사용했던 것은,
www.codehighlighter.com 에서 제공하는 ASP.NET 컴포넌트였다.
이 컴포넌트도 상당히 좋았지만,
Scott Hanselman이 추천해준(아래 링크), Syntax Highlighter를 알고나서는 바로 이것으로 변경했다.
http://www.hanselman.com/blog/BestCodeSyntaxHighlighterForSnippetsInYourBlog.aspx
Syntax Highlighter의 메인 배포사이트는 최근에 아래 경로로 변경되었다.
http://alexgorbatchev.com/wiki/SyntaxHighlighter
위 사이트에서 2.0 소스를 다운로드 받아 블로그 및 게시판에 적용하는 예를 아래 순서대로 정리해보았다.
1. http://alexgorbatchev.com/wiki/SyntaxHighlighter에서 최근 소스 다운로드 : test.htm의 소스를 열어보면, 쉽게 이해할 수 있다.
2. 블로그/게시판의 영역에 아래와 같이 관련 자바스크립트 또는 CSS 파일을 인클루드한다.
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushBash.js"></script>
<script type="text/javascript" src="scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="scripts/shBrushCss.js"></script>
<script type="text/javascript" src="scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="scripts/shBrushJava.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="scripts/shBrushPython.js"></script>
<script type="text/javascript" src="scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="scripts/shBrushScala.js"></script>
<script type="text/javascript" src="scripts/shBrushSql.js"></script>
<script type="text/javascript" src="scripts/shBrushVb.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
3. 블로그/게시판에 코드 부분을 <pre class="brush:c-sharp;"> ... </pre>식으로 묶어서 입력한다.
4. 기타 자세한 내용은 위 사이트의 Document를 참고한다.
위 순서로 사이트에 적용하면, 아래와 같이 Syntax Highlight 기능이 적용된다.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace HelloWorld
{
class Program
{
static void Main(string[] args)
{
Console.WriteLine("닷넷코리아");
}
}
}