출처: http://blueray21.tistory.com/30
1. 먼저 아래 사이트에서 SyntaxHighlighter를 다운받고 압축을 푼다.
http://alexgorbatchev.com/SyntaxHighlighter/
2. HTML/CSS 편집으로 들어간다.
3. 압축한 파일들 중 styles에 있는 CSS 파일과 scripts에 있는 자바 스크립트 파일을 모두 위 그림의 파일 업로드를 이용하여 올린다.
4.
<link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css" />
태그를 헤더 쪽에 삽입하면 된다.
헤더 부분을 닫기 전에 넣으면 된다.
저 태그는 코드 입력할 시의 테마를 의미하는데 현재까지 지원하고 있는 테마는 다음과 같다.
5. 다음 태그를 입력한다.
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.js"></script>
<script type="text/javascript" src="./images/shBrushAppleScript.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushColdFusion.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushErlang.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJavaFX.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPerl.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPowerShell.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushSass.js"></script>
<script type="text/javascript" src="./images/shBrushScala.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushVb.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
다음 태그는 바디 태그 닫기 전에 입력 한다.
프로그래밍 언어 문법을 넣는 것이다.
한 번에 안 찍혀서 사진을 올리지 않는다. </body> 앞에 위의 태그를 붙이면 된다.
현재 SyntaxHighlighter에서 지원하고 있는 프로그램 문법은 다음과 같다.
6. 사용은 다음과 같이 한다.
블로그 사용시 오른쪽 상단 HTML에 체크를 하여 HTML 편집기 모드로 한 후에
<pre class="brush:Brush alias에 있는 프로그램 코드">
코드 입력
</pre>
이렇게 하면 각 프로그래밍 언어에 맞게 문법이 강조 된다.
이거 처음에 할려고 하니까 안 먹혀서 2시간 잡아먹었는데
빡쳐서 그냥 처음부터 다시하니 잘 먹히더라.
사실 저렇게 할 필요도 없이 웹사이트에서도 저걸 이용할 수 있다.
당장 구글에 SyntaxHighlighter Web 이라고만 검색해도 몇 개의 사이트가 나온다.
그러나 코드를 입력할 일이 많다면 티스토리에 저걸 잡아넣는 것도 괜찮은 방법이라고 생각한다.
