블로그에 Syntaxhighlighter 붙이기

요즘은 거의 쓸일이 없지만 가끔 아주 가끔 블로그에 소스코드(?)를 올리는 관계로 syntaxhighlighter를 추가해놨습니다. 적용하면 아래와 같이 소스코드를 표시할 수 있습니다.

처음에는 스크립트랑 받아서 올렸었는데 버전업 되면 매번 업데이트 해야 하는 관계로 사이트에서 제공하는 주소로 변경했습니다.
<title>~</title 태그 앞에 아래 코드를 추가합니다.

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css" rel="stylesheet" type="text/css" />

<title>~</title> 태그 뒤에 아래 코드를 추가합니다.

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script>
<!-- 여기에 위와 같은 형태로 js 파일을 추가하면 원하는 문법을 추가할 수 있습니다. -->
<script language="javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script> 

원하는 다른 문법이 있는 경우 아래 링크를 참조하여 원하는 js 파일을 추가하면 됩니다.

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/파일명.js" type="text/javascript"></script> 링크 : http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

사용법은 다음과 같습니다.
소스코드를 <pre> 태그로 묶습니다.
<pre class="brush: js">소스코드</pre>
class 항목은 brush가 있으며 원하는 문법으로 설정할 수 있습니다. 예를 들어 c#인 경우 brush값으로 csharp을 입력하면 됩니다.
사용 가능한 문법은 아래 링크에서 확인하실 수 있습니다.
링크 : http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

그리고 보여지는 테마는 아래 링크에서 테마를 확인 후 css 파일을 변경할 수 있습니다.
링크 : http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
shThemexxxxxx.css 파일을 위 링크를 참조해서 다른 이름으로 변경하면 됩니다.

관련된 정보는 아래 링크에서 확인할 수 있습니다.
출처 : http://alexgorbatchev.com/SyntaxHighlighter/