티스토리에서 syntax highlighter 사용하기

티스토리에 플러그인이 있을 것이라 생각했지만, 없었다.

그래서 찾은게 여기 이다. 이 방식으로 3.x 에서도 잘 된다.

3.x 는 소스 안에서 드래그해서 복사하면 행번호 없이 소스만 복사 되어 좋다.

설치를 위해서는 일단 문법 강조기를 다운로드하고 압축을 풀자.

http://alexgorbatchev.com/SyntaxHighlighter/download

그리고, 티스토리 블로그 관리자 화면에서 스킨 - html/css 편집 - 파일 업로드를 선택한다.

압축 푼 파일에서 scripts, styles 디렉터리의 모든 파일을 넣도록 하자. 원한다면 필요한 파일만 넣어도 되겠다.

그리고 HTML/CSS 편집에서 skin.html 에서 title 태그 아래다가... 다음을 넣자.

<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushBash.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/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.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/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.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/shBrushColdFusion.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushJavaFX.js"></script>
<script type="text/javascript" src="./images/shBrushPerl.js"></script>
<script type="text/javascript" src="./images/shBrushPowerShell.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">
<script type="text/javascript">
	SyntaxHighlighter.all();
</script>

모든 스크립트를 넣을 필요는 없다. 많이 넣으면 느려지니 필요한 언어만 넣어도 상관없지만, shCore 와 shBrush 는 빼놓지 말자. 그리고 3.x 에서는 아래 부분은 빠진다.

SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf'; 

이제 문법 강조를 사용하려면... 다음과 같이 하자. 역시나 <pre> 태그를 사용해서 코드를 넣는다. 이 태그에는 "brush: c" 와 같이 언어에 해당하는 브러쉬를 설정한다. 여기서는 c/c++ 이다.

<pre class="brush: c">
... some code here ....
</pre>

실제로 편집하려면, 아직은 번거롭다. 기본적으로 작성한 다음에 HTML 보기로 class 를 넣어줘야 한다.

아무튼 이쁘게 할 수 있게 되었다.

다음은 brush 에 들어갈 문법과 스크립트 파일의 관계를 보여준다. 필요한 것만 넣도록하자.

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