티스토리 코드 강조(SyntaxHighlighting) 를 적용하기 (1)

웹페이지에 소스코드를 넣고 따로 작업을 하지 않으면 읽기 힘들다.

코드를 보기 좋게 꾸며주는 기능을 Syntax Highlighting 라고 한다.

티스토리는 스킨의 Html을 수정할수 있어 적용이 가능하다.

적용할 것은 http://alexgorbatchev.com/SyntaxHighlighter/ 에 있는 것으로

Apache, Aptana, Mozilla, Yahoo, Wordpress 등등 여러곳에서 사용하는 제품이다.

사용하는 방법은 두가지가 있는데 그중에서

1. 티스토리 서버에 업로드 하여 사용하는 방법을 해보겠습니다.

http://alexgorbatchev.com/SyntaxHighlighter/ 에 접속하여

우측을 보면 download(다운로드)가 있습니다. 그 곳을 클릭하여 페이지를 이동합니다.

Click here to download 를 클릭하여 파일을 받습니다.

압축을 풀면 몇개의 폴더가 보입니다. 그 중에서 사용할 것은 scripts, styles 폴더입니다.

scripts 폴더는 필수적으로 필요한 core파일과 각 언어에 적용되는 Brush 파일들이 있습니다.

styles 폴더는 소스를 보여줄때 어떤 형태로 보여줄 것인지 담당하는 파일들입니다.

★ 지원되는 언어 목록

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

티스토리의 관리자 페이지로 들어갑니다.

좌측의 메뉴를 보면 HTML/CSS 편집이 있습니다.

그곳으로 들어가 파일업로드를 선택하고 하단부에 있는 추가 버튼을 이용하여 파일을 업로드 합니다.

업로드할 파일은 scripts, styles 폴더에 있는 파일들입니다.

sctipts에서 업로드 하는 것은 코드 꾸미기를 적용할 것이

C언어라면 shBrushCpp.js를 JAVA라면 shBrushJava.js를 업로드 하면 됩니다.

단 필수 파일인 shCore.js는 꼭 올려야 됩니다. 이 파일이 없으면 해당 기능이 동작하지 않습니다.

styles에서 업로드 할 것은 shCore.css 는 꼭 업로드 하고 원하는 테마 파일을 선택하여 업로드 합니다.

(아니면 shCore.css + 테마 파일을 올려도 됩니다.)

styles 폴더에 shCore~~ 어쩌구 하는 파일이 있는데 이것은 Core 파일과 Theme파일이 통합된 것입니다.

shCore.cs + shThemeDefault.cs = shCoreDefault.css 입니다.

css 파일 2개 올리는게 싫다면 shCore~~ 어쩌구 하는 파일을 이용하시면 됩니다.

● 테마 미리보기 링크 입니다.

Default 테마 보기                 Django 테마 보기 

Eclipse 테마 보기                 Emacs 테마 보기

Fade to Gray 테마 보기        Midnight 테마 보기

RDark 테마 보기

파일을 다 올렸으면 상단에서 HTML/CSS를 선택하여 skin.html을 편집하는 곳으로 갑니다.

skin.html 에서 아래에 해당하는 곳을 찾는다.

위 문장 바로 아래쪽에 다음 내용을 넣는다.

* 코드 강조를 적용하는 언어파일과 테마 파일은 개인의 취향에 따라서 추가 또는 삭제 하면 됩니다.

위 작업까지 완료가 되었다면 사용을 어떻게 해야 되는가?

글을 작성할때 html 모드(글작성 상단 오른쪽에 보면 체크박스가 있습니다.)로 들어갈 수 있습니다.

그것으로 들어가서

 
// C또는 C언이이면 해당언어에 cpp 또는 C
// PHP면 해당언어에 php와 같은 형태로 입력
....
어쩌구 저쩌구 코드
....

라고 입력하면 됩니다.

스킨의 html을 수정할수 있는 블로그라면 같은 방법으로 적용이 가능하다.

naver 블로그 같이 스킨의 html 수정 불가능한 곳은 안되지만...