코드 하이라이트(Syntax Highlighter)를 티스토리(Tistory)에 적용하기

 웹 사이트를 돌아다니다보면, 포스트 중에 프로그래밍 코드를 읽기 쉽게 보여주는 뷰어를 제공한다. 바로 Syntax Highlighter를 사용한 것이다. 우리나라에서는 코드 하이라이트라고 더 많이 알려져있다. 코드 하이라이트는 오픈소스 라이센스(L-GPL)를 따르기 때문에 누구나 사용할 수 있다.

1. 코드 하이라이트(Syntax Highlighter) 다운로드

• 다운로드 : 

syntaxhighlighter_3.0.83.zip

• 사이트 : http://alexgorbatchev.com/SyntaxHighlighter/

2. 코드 하이라이트(Syntax Highlighter) 업로드

• 다운로드 받은 파일의 압축을 풀면 나오는 폴더 중 다른 것들은 무시하고 scripts 폴더와 styles 폴더의 파일만 업로드하면 된다. 티스토리의 경우 자동으로 images/ 폴더에 업로드 될것이다.

• 코어 필수 파일 : scripts/shCore.js
• 언어 선택 파일 : scripts/shBrush*.js
• 사용할 언어를 복수개 선택해야한다. 업로드는 다 해두고, 사용할 언어만 선택하면 된다.
• 스타일 선택 파일 : styles/shCore*.css
• 스타일을 하나 선택해야한다. 업로드는 다 해두고, 스크립트에서 하나를 선택하면 된다.
• 테마 선택 파일 : styles/shTheme*.css
• 테마를 하나 선택해야한다. 업로드는 다 해두고, 스크립트에서 하나를 선택하면 된다.

3. 코드 하이라이트(Syntax Highlighter) 설정

• head 태그 사이 title 위에 아래 태그를 넣는다.
• 필자는 언어 JS파일을 다섯개 설정하였다. 모든 언어를 설정해둘 수도 있지만, 웹페이지 용량만 커지기 때문에 사용할 언어만 설정하는 것이 좋다.
• 스타일과 테마는 Default로 설정하였다. 각자 스타일과 테마를 테스트해보며, 원하는 스타일을 찾으면 되겠다.

• 크롬 브라우저를 위해 css 파일에 다음 구문을 추가한다. 필자는 글씨 크기를 조금 줄였다.

div .syntaxhighlighter { 
    overflow-y: hidden!important; overflow-x: auto!important;
    font-size:0.9em !important;
}

4. 코드 하이라이트(Syntax Highlighter) 사용하기

• 코드 하이라이트를 사용하기 위해서는 편집 화면 오른쪽위에 HTML 편집으로 전환해야 한다. 그리고 pre 태그의 class 속성에 "brush:브러쉬명"을 입력하고, pre 태그 안쪽에 코드를 입력하면 된다.

 

   코드 기입~!

• 언어 JS파일과 브러쉬명은 아래와 같다.

언어	[브러쉬명]	파일명
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

(출처 : http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/)