Tistory에 syntax Highlighting 추가하기

1. Syntax Highlight 란?

Syntax Highlight 란 웹페이지에서 프로그램의 소스코드를 더욱 쉽게 읽을 수 있도록 도와주는 프로그램이다.

자, 어떤 글이 더 읽기 쉬운가?

#include <stdio.h>
#include <string.h>

int main(void)
{
    char szBuffer[] = "Hello World!";
    printf ("%s\n", szBuffer);
    return 0;
}

?

1 2 3 4 5 6 7 8 9

#include <STDIO.H> #include <STRING.H>    int main(void) {     char szBuffer[] = "Hello World!";     printf ("%s\n", szBuffer);     return 0; }

2. 티스토리에 어떻게 설치 하는가?


우선 http://alexgorbatchev.com/SyntaxHighlighter/download/ 에서 Syntax Higlihght 최신 버전을 다운 받는다. 그리고 다운 받은 압축 파일을 풀면 폴더 내에 scripts 폴더와 styles 폴더가 존재한다. 

 

 


scripts 폴더는 각 언어의 문법에 맞는 Brush 들을 담고 있다.  styles 폴더는 어떠한 색과, 어떠한 배경과, 어떠한 글자 크기로 보여줄것인가를 담당하는 Thema  파일들을 담고 있다. 이중에서 자신의 문법에 맞는 파일들을 골라 Tistory 에 업데이트 하면 된다.

 

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

브러시 파일은 문법에 맞게 업로드 하면 된다. 필수적으로 필요한 파일은 shCore.js 이므로 이파일도 꼭 같이 올려야 한다.


자, 그럼 이제 티스토리 스킨에 적용 해 보자.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<SCRIPT type=text/javascript src="./images/shCore.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/shBrushPerl.js"></SCRIPT> <SCRIPT type=text/javascript src="./images/shBrushPython.js"></SCRIPT> <SCRIPT type=text/javascript src="./images/shBrushJava.js"></SCRIPT> <SCRIPT type=text/javascript src="./images/shBrushNasm8086.js"></SCRIPT>     <LINK rel=stylesheet type=text/css href="./images/shCoreDefault.css">    <SCRIPT type=text/javascript> //<![CDATA[     SyntaxHighlighter.config.bloggerMode = true;     SyntaxHighlighter.all(); //]]> </SCRIPT>

이 코드를 긁어서 HTML/CSS 편집에서 skin.html 의

<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />

이 문장 바로 밑에 다음과 같이 삽입한다. (테마나 브러시 파일은 개인의 기호에 맞게 변경하거나 추가, 삭제 하면 된다.)

그리고 구글 크롬에서만 나타나는 필요없는 세로 스크롤바를 제거하기 위해 style.css 편집에서 다음과 같은 코드를 입력한다.

/* 구글 크롬에서 Syntax Highlighter 3.0 의 세로 스크롤바 제거를 위한 문장 */

div .syntaxhighlighter { overflow-y: hidden!important; overflow-x: auto!important; }

3. 설치된 Syntax Highlgiht를 어떻게 사용하는가?


글 입력시 HTMl 태그 창으로 들어가서, 다음과 같이 입력하면 된다.

<PRE class="brush: java">

소스 코드

</PRE>

추가적으로, 옵션을 주고싶다면 다음의 홈페이지를 참고하라.

http://lh20.tistory.com/entry/SyntaxHighlighter%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4%EC%84%9C-%EC%BD%94%EB%93%9C-%EA%BE%B8%EB%AF%B8%EA%B8%B0%EC%A3%BC%EB%A1%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%98%B5%EC%85%98-%EC%9C%84%EC%A3%BC%EB%A1%9C



참고 문헌


서적, 논문

블로그 및 웹페이지

1. http://zoc.kr/970
2. http://lh20.tistory.com/entry/SyntaxHighlighter%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4%EC%84%9C-%EC%BD%94%EB%93%9C-%EA%BE%B8%EB%AF%B8%EA%B8%B0%EC%A3%BC%EB%A1%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%98%B5%EC%85%98-%EC%9C%84%EC%A3%BC%EB%A1%9C
3.http://anster.tistory.com/3  (오타가 몇몇부분 있어 수정하고 참조함)