티스토리에서 소스코드 Syntax Highlighting 적용

몇년을 귀차니즘으로 버티다가 기어이 "소스코드 문법 강조 스타일"을 적용해본다. 짜잉나는 네이버 블로그를 떠난 이유도 이런 자유도 때문이 아닐까 한다.

1. js 및 css 다운로드

 - http://alexgorbatchev.com/SyntaxHighlighter/download/ 에서 zip 파일 내려받기
 - 글쓰는 시점에는 syntaxhighlighter_3.0.83.zip 입니다.
 - 임의의 폴더에 압축 해제시켜 놓습니다.


2. js 및 css 등록

 - Admin → 꾸미기 → HTML/CSS 편집
 - "파입업로드" 탭에서 위에서 압축해제한 파일 중 scripts, styles 폴더의 모든 js 및 css를 업로드 합니다.


3. skin.html 수정

 - HTML/CSS 탭 내의 skin.html 내용중 Head 태그내에 아래를 붙여넣음
 - Required 주석이 붙은 것은 반드시 붙여넣어야 하고..
 - Optional 붙은 주석은 이름을 잘 보고 쓰고 싶은 것만 넣으면 됩니다.

<!-- Required including -->
<script type="text/javascript" src="./images/shCore.js"></script>
<link rel="stylesheet" type="text/css" href="./images/shCore.css" />
<link rel="stylesheet" type="text/css" href="./images/shThemeDefault.css" />

<!-- Optional including -->
<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>

<!-- Required including -->
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>


4. 소스코드 작성

 - 에디터 우측상단 html 체크박스 체크 후 HTML 수정모드로 진입하여
 - 아래처럼 pre 태그 내에 소스코드를 써주면 됩니다.

public class A {

}

5. 테스트 결과

public class A {

}

6. 사용 가능한 brush 목록

 - http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes 참조

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

잘 되려나 시간되면 테스트 좀 해봐야지...