SyntaxHighliter 2.0 사용

웹페이지 돌아다니다 보면, 소스코드 내용 중 문법이 Highlighting 되어서 이쁘게 나오는걸 보곤 한다.

이렇게..

class TestClass extends Object {
	public TestClass() {}
	
	public testFunction(String param) {
		System.out.println("Syntax Hilighting " + param);
	}
}

처음에 참으로 신기하고 이뻐보였다.. 나도 써보고 싶은것은 인지상정..ㅎ

사용법도 상당히 간단하다.

1. 다운받기

우선, http://alexgorbatchev.com/wiki/SyntaxHighlighter 사이트가 공식 사이트이다. 현재 버전은 2.0.320 이고
공짜로 다운로드 받아서 사용 가능하다.

위의 download 링크 눌러서 다운로드 한다. 그냥 본 블로그에 첨부파일로도 집어넣었다.

syntaxhighlighter_2.0.320.zip

압축을 풀면 아래와 같이 세가지 디렉토리가 나온다

* scripts - 동작시에 필요한 script 들이 있다. 모든 .js 파일들이 페이지에 include 되어야 한다. 스크립트 중 shCore.js 와 shLegacy.js 스크립트는 Optimize 되어있어서 분석 불가다.
* src - 위 Optimize 된 스크립트의 소스가 있다. 사용할때는 src 디렉토리는 빼고 쓰면 된다.
* styles - 기본 및 테마 별 CSS 가 들어있는 디렉토리이다. 사용 시 몇가지를 link 해줘야 한다.

위 자료가 준비되었으면, 사용하면 된다.^^;;

2. <Header> 에 추가하기

사용법 또한 참 쉽다. HTML  코드에서 몇가지만 추가 해주면 된다.

우선, <header> 에, 아래 스크립트들을 포함한다.

<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>

다음은 역시 <header> 영역 안에, CSS 를 포함시킨다.

<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. 내용 만들기

이제 본격적으로 SyntaxHighlighter 를 사용해보자. 정말 쉽다..
아래처럼 <pre> 태그를 쓰면 된다.

<pre class="brush: c-sharp;">
function test() : String
{
	return 10;
}
</pre>

이게 끝이다. 특이한 것은 <pre> 태그의 class 이다.
위의 예에서는 <pre> </pre> 사이의 내용을 c-sharp 문법으로 인식하라는 얘기다.
이걸 바꿀 수 있는데, 어떤 스타일이 있는지는, 다운받은 압축파일을 푼 디렉토리의
scripts 디렉토리를 보면 알 수 있다.

위와 같이 많은 종류의 js 파일들이 있는데, 대충 파일명을 보면, 어떤 문법인지 알 수 있다.
그리고, js 파일을 열어보면 내용 중에 아래와 같은 부분이 있다.

SyntaxHighlighter.brushes.JScript = function()
{
	var keywords =	'break case catch continue ' +
					'default delete do else false  ' +
					'for function if in instanceof ' +
					'new null return super switch ' +
					'this throw true try typeof var while with'
					;

	this.regexList = [
		{ regex: SyntaxHighlighter.regexLib.singleLineCComments,	css: 'comments' },			// one line comments
		{ regex: SyntaxHighlighter.regexLib.multiLineCComments,		css: 'comments' },			// multiline comments
		{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,		css: 'string' },			// double quoted strings
		{ regex: SyntaxHighlighter.regexLib.singleQuotedString,		css: 'string' },			// single quoted strings
		{ regex: /\s*#.*/gm,										css: 'preprocessor' },		// preprocessor tags like #region and #endregion
		{ regex: new RegExp(this.getKeywords(keywords), 'gm'),		css: 'keyword' }			// keywords
		];
	
	this.forHtmlScript(SyntaxHighlighter.regexLib.scriptScriptTags);
};

SyntaxHighlighter.brushes.JScript.prototype	= new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.JScript.aliases	= ['js', 'jscript', 'javascript'];

위 내용 중에,

SyntaxHighlighter.brushes.JScript.aliases	= ['js', 'jscript', 'javascript'];

이 부분을 보면, <pre classes="brush: <aliase이름>"> 중에 <aliase이름> 을 뭘 줘야할 지 알 수 있다.
또, 각 문법의 사용결과 샘플은 http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes 에서 확인할 수 있다.

친절하게도 위와 같이, aliase 와 관련 파일명도 목록으로 제공한다.

4. 끝

참 잘만들었다는 생각이 든다. 내가 돈이 없어서 donation 은 못하고 잘 쓰기로 하겠다.
Tistory 블로그에서 사용하는 방법도 나중에 시간되면 올려보도록 하겠다.

그나저나 오픈소스 프레임워크 사용법들도 익혀야 하는데 갑자기 UI 에 필이 꽃혀서 이런..