[블로그]소스코드를 이쁘고 가독성 있게 보여주는 - SyntaxHighlighter 2.x

SyntaxHighlighter_v2.0.296.zip

블로그들 중에 소프트웨어 개발과 관련된 팁이나 정보들을 올리는 블로그들을 많이 찾아볼 수 있다.
나도 자주 소스코드가 포함된 포스트를 쓰곤 하는데 주로 글상자 안에 소스를 붙여놓곤 하였다.
그러다가 한 블로그에서 줄 구분과 줄번호가 표시되어 있는 화면으로 소스를 보여주는 페이지를 보게되었다.
이리저리 찾아본 결과 그것은 바로 SyntaxHighlighter 라는 것이었다.
사이트에서 다운을 받은 뒤, 그리 어렵지 않은 방법으로 사용이 가능했다.

먼저 사이트에 방문하여 최신 버전을 다운 받자.(현재 최신 버전인 2.0.296 버전 티스토리 설치를 기준으로 설명함.)

다운을 받았으면  티스토리 관리자 화면에서 '스킨 > HTML/CSS 편집' 메뉴로 간다.
다운받은 파일의 압축을 푼뒤 scripts, styles 폴더에 있는 모든 파일을 '파일 업로드' 탭에서 업로드해준다.

파일이 다 업로드 되었으면 'HTML/CSS 편집' 탭으로 돌아와서 title 테그 아래에
아래와 같이 Javascript 코드를 넣어주고 저장한다.

준비가 끝났으면 글쓰기로 가서 html 로 입력하기로 변경하여
압축파일중 test.html 파일에 있는 코드를 입력하여 테스트 해보도록 하자.

function test() : String{	return 10;}

SyntaxHighlighter 2.x 에서 지원하는 언어는 아래와 같으며 pre 테그의 class 속성에서 brush 의 값을
해당 언어의 Alias 로 지정해주면 사용이 가능하다.

Brush name	Brush aliases	File name
Bash/shell	bash, shell	shBrushBash.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js