소스코드 구문 강조 syntaxhighlighter

구글 프로젝트 중 소스코드 구문강조 기능을 구현하는 syntaxhighlighter를 제공합니다. 단점이 한가지 있다면, 상단에 자바스크립트 파일을 불러오는데 한번씩 시간이 오래 걸린다는 것입니다. 더 좋은 방법이 있는지는 모르겠지만, 크게 불편함은 없는 것 같아서 그냥 사용 중 입니다.

CSS코드
.dp-highlighter{ font-family:"Consolas", "Courier New", Courier, mono, serif; font-size:12px;background-color:#E7E5DC;overflow:hidden;margin:18px 0 !important; padding-top:1px;/* adds a little border on top when controls are hidden */ } /* clear styles */ .dp-highlighter ol, .dp-highlighter ol li, .dp-highlighter ol li span{margin:0;padding:0;border:none;word-wrap:break-word;} .dp-highlighter a, .dp-highlighter a:hover{background:none;border:none;padding:0;margin:0;} .dp-highlighter .bar{padding-left:45px;} .dp-highlighter.collapsed .bar, .dp-highlighter.nogutter .bar{padding-left:0px;} .dp-highlighter ol{ list-style:decimal;/* for ie */ background-color:#fff; margin:0px 0px 1px 45px !important;/* 1px bottom margin seems to fix occasional Firefox scrolling */ padding:0px;color:#5C5C5C;} .dp-highlighter.nogutter ol, .dp-highlighter.nogutter ol li{list-style:none !important;margin-left:0px !important;} .dp-highlighter ol li, .dp-highlighter .columns div{ list-style:decimal-leading-zero;/* better look for others, override cascade from OL */ list-style-position:outside !important; border-left:3px solid #6CE26C;background-color:#F8F8F8;color:#5C5C5C;padding:0 3px 0 10px !important;margin:0 !important;line-height:14px;} .dp-highlighter.nogutter ol li, .dp-highlighter.nogutter .columns div{border:0;} .dp-highlighter .columns{background-color:#F8F8F8;color:gray;overflow:hidden;} .dp-highlighter .columns div{padding-bottom:5px;} .dp-highlighter ol li.alt{background-color:#FFF;color:inherit;} .dp-highlighter ol li span{color:black;background-color:inherit;} /* Adjust some properties when collapsed */ .dp-highlighter.collapsed ol{margin:0px;} .dp-highlighter.collapsed ol li{display:none;} /* Additional modifications when in print-view */ .dp-highlighter.printing{border:none;} .dp-highlighter.printing .tools{display:none !important;} .dp-highlighter.printing li{display:list-item !important;} /* Styles for the tools */ .dp-highlighter .tools{ padding:3px 8px 3px 10px; font:9px Verdana, Geneva, Arial, Helvetica, sans-serif; color:silver;background-color:#f8f8f8;padding-bottom:10px;border-left:3px solid #6CE26C;} .dp-highlighter.nogutter .tools{border-left:0;} .dp-highlighter.collapsed .tools{border-bottom:0;} .dp-highlighter .tools a{font-size:9px;color:#a0a0a0;background-color:inherit;text-decoration:none;margin-right:10px;} .dp-highlighter .tools a:hover{color:red;background-color:inherit;text-decoration:underline;} /* About dialog styles */ .dp-about{background-color:#fff;color:#333;margin:0px;padding:0px;} .dp-about table{width:100%;height:100%;font-size:11px;font-family:Tahoma, Verdana, Arial, sans-serif !important;} .dp-about td{padding:10px;vertical-align:top;} .dp-about .copy{border-bottom:1px solid #ACA899;height:95%;} .dp-about .title{color:red;background-color:inherit;font-weight:bold;} .dp-about .para{margin:0 0 4px 0;} .dp-about .footer{background-color:#ECEADB;color:#333;border-top:1px solid #fff;text-align:right;} .dp-about .close{font-size:11px;font-family:Tahoma, Verdana, Arial, sans-serif !important;background-color:#ECEADB;color:#333;width:60px;height:22px;} /* Language specific styles */ .dp-highlighter .comment, .dp-highlighter .comments{color:#008200;background-color:inherit;} .dp-highlighter .string{color:blue;background-color:inherit;} .dp-highlighter .keyword{color:#069;font-weight:bold;background-color:inherit;} .dp-highlighter .preprocessor{color:gray;background-color:inherit;}
헤드에 들어갈 스크립트 ( </head>앞에 )
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript"></script>

문서 하단에 들어갈 스크립트 ( </body>앞에 )
<script type="text/javascript"> dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code'); </script>

예제보기
<textarea name="code" class="javascript"> //소스코드 </textarea>
지원언어 (http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/에서 가져왔고, 헤드에 넣은 스크립트와 비교 해 보면 되겠다. Brush aliases로 class명을 참고.. just ex...)

Brush name	Brush aliases	File name
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

SyntaxHighlighter 3.0.83 다운로드
(3.0.83 버전의 자세한 내용은 index,html파일을 통해 볼 수 있습니다.)

SyntaxHighlighter 홈페이지 바로가기


구문강조 테스트 해 볼 수 있는 사이트 http://daver.kr/tools/geshi/