Tistory에 소스 코드 넣기(SyntaxHighlighter 사용법)

처음 코딩을 시작할 때, VS에서 어두운 바탕에 흰글씨를 쓰다보니 모든 코드 편집기 테마를 어두운 바탕에 쓰는 것을 선호하게 되었다.

블로그로 코딩 공부한 것을 정리하기 위해서는 그냥 글을 쓰듯이 코드를 적기 싫어서 코드에 테마를 적용해서 적는 방법을 찾아 보았다.

1. SyntaxHighlighter에서 파일 다운로드 및 압축 해제

http://alexgorbatchev.com/SyntaxHighlighter/

(글을 작성하고 있는 이 시점에서 버전은 3.0.83)

2. tistory 관리> 꾸미기 HTML/CSS 편집> 파일 업로드

압축 해제한 폴더 중 scripts와 style 폴더의 모든 파일을 업로드합니다.

3. 스킨 HTML의 </head> 태그 앞에 아래 코드를 복사하여 붙여 넣습니다.

<link href="./images/shCore.css" rel="stylesheet" type="text/css"/>
<link href="./images/shThemeRDark.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shLegacy.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/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">
  SyntaxHighlighter.defaults["toolbar"] = false; // 툴바없애기
  SyntaxHighlighter.defaults["auto-links"] = false; // 자동 링크없애기
  SyntaxHighlighter.all();
</script>

<위의 코드는 http://sometimes-n.tistory.com/5 에서 참고하였습니다.>

SyntaxHighlighter에는 총 7가지의 테마가 있습니다. 마음에 드는 테마를 2번째줄 "./images/shThemeRDark.css" 에서 수정해주면 됩니다.

(테마 종류 확인:http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/)

어째서인지 저는 툴바가 생성되었기에 CSS편집기에서 툴바를 없애는 코드를 더 추가하였습니다.

.syntaxhighlighter {
    padding: 1px 0;
}

<위의 코드는 http://wiki.aissii.com/2690에서 참고하였습니다.>

4. 블로그에 소스 코드 넣기

글 쓰는 편집기에서 HTML 모드로 변경하고 

넣고 싶은 부분에 다음과 같이 삽입하면 됩니다.

<pre class="brush:cpp">
//소스코드
</pre>

brush:cpp 에서 cpp부분을 삽입하고자하는 언어 종류에 따라 바꿔주면 됩니다.

'pre' 태그를 사용하는 경우 '<'은 &lt;로 '>'은 &gt;로 바꿔줘야 본문의 '<'와 '>'와 헷갈리지 않나보다.

메모장에서 바꿔주고 코드를 복붙하여 쓰는 것이 좋을듯하다.

아니면 다음 블로그를 참고해보자. (http://bryan7.tistory.com/10)

* 언어별 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

이상 간단하게 SyntaxHighlighter를 사용하는 방법에 대해 적어보았습니다.