블로그에 코드 색칠하기 syntaxhighlight

js에 정규식이 있는 것 같아요.

언어 별로 정리된 js파일을 불러와서 css로 theme를 설정하여 class를 brush:언어이름으로 한 pre 태그에 색칠이 자동으로 들어가요.

기본 theme으로 Visual Basic 언어를 색칠해 보아요.

'이렇게
Private Sub Form1_Load()
MsgBox("현재 시각은 " & Time & "입니다")

에디터에서는 색칠이 안되네요.

이제 설명 들어갈게요.

사용법

<pre class="brush:언어">

코드

</pre>

brush에 들어갈 언어는 밑의 표를 참조해요.

ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.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
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.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

다운로드하기

홈페이지는 http://alexgorbatchev.com/SyntaxHighlighter/ 여기 있어요. 들어가서 우측 상단에 download 글자를 클릭해서 다운 받아요.

하지만 커스터마이징된 버젼이 더 마음에 들거에요.  syntaxhighlighter_customized.zip 이걸 다운받아요.

세팅하기

티스토리 기준으로 블로그에 적용시키는 방법은 

이렇게 파일을 올려주시고

이렇게 소스를 images경로로 잘 설정하셔서 skin.html를 수정하시면 됩니다.