티스토리에서 SyntaxHighlighter 사용하는 방법

프로그래밍 관련하여 구글링 하다보면 상용 Edit 편집기의 형태를 띠고 있는 소스 편집 블로그 글을 종종 보게 된다.

Javascript 편집이 가능한 블로그에서 SyntaxHighlighter를 사용해 Edit 편집기 형태로 블로그를 꾸밀 수 있다. 

SyntaxHighlighter 사용 시, 검정색으로 소스코드만 죽 나열해 놓은 타 블로그에 비해, 예약어에는 파란색 Bold 형태로 Highlight가 들어가 있어서 예쁘게 보이기도 하고 시인성도 상당히 뛰어나다.

	
 
import java.io.IOException;
import java.util.*; 

티스토리에서 소스코드를 Edit 편집기 형태로 꾸미는 방법을 소개하고자 한다.

 

 

 

1. SyntaxHighlighter 다운로드

 

SyntaxHighlighter를 다운로드 한다. (현재 최신버전 3.0.83)

http://alexgorbatchev.com/SyntaxHighlighter/

 

 

다운로드한 zip 파일을 압축해제 하면 여러 파일이 있는데, 이 중 필요한 것은 script, Styles 폴더의 파일 뿐이다.

 

 

 

2. 관리 - HTML/CSS 편집 메뉴에서 파일 등록

 

 

 

 

자신의 블로그 관리 페이지로 들어가면 왼쪽 메뉴에 HTMLL/CSS 편집 메뉴를 볼 수 있다.

HTML/CSS 편집 내용 중 파일업로드 탭으로 이동한다.

아래에 추가 버튼을 눌러 조금 전 압축 풀어놓은 script, Styles 폴더 내의 파일을 모두 업로드 시킨다.

 

 

3. HTML/CSS 편집

 

파일 업로드를 마쳤다면 옆 탭인 HTML/CSS 탭으로 이동한다.

 

 

 

skin.html을 수정하는 부분을 볼 수 있는데, </head> 윗쪽으로 아래 내용을 복사해서 붙여 넣는다.

이 때, 주의할 사항으로는 엔터(Enter)가 적용되지 않은 상태로 붙여넣기 되는 경우가 있으니 태그에 맞게 줄바꿈 해준다.

줄바꿈이 없게 되면 스크립트가 주석 뒤에 붙으면서 해당 스크립트 이하를 주석처리 하게 만들기 때문이다.

SyntaxHighlighter에서 글 줄바꿈이 적용되도록 글 전체를 복사하는 방법은 소스에서 더블클릭(전체선택) 후 복사를 하면 된다. 

 

 

 

 

 저장을 눌러 설정을 끝낸다.

 

 

4. SyntaxHighlighter 적용 방법

 

 

 

 

일반적으로 포스팅을 작성하던 것처럼 내용을 입력한 후, 우측 상단의 HTML 편집 체크박스를 눌러 HTML 편집 모드로 이동한다.

 

 

 

 

 

사용법은 상당히 간단하다.

pre 태그에 brush 속성을 해당 코드에 맞게 입력 해주고, pre 태그 사이에 해당 소스코드가 위치하게 하면 된다.

	
 
<!--Start of SyntaxHighlighter--> 
<link rel="stylesheet" type="text/css" href="./images/shCore.css"> 
<link rel="stylesheet" type="text/css" href="./images/shThemeDefault.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 language="javascript">
SyntaxHighlighter.defaults['toolbar'] = false; // 툴바 설정 (기본값 True)
SyntaxHighlighter.defaults['gutter'] = true; // 라인 번호 설정 (기본값 True)
SyntaxHighlighter.defaults['tab-size'] = 2; // 탭 사이즈 설정 (기본값 4)
SyntaxHighlighter.defaults['first-line'] = 1; // 라인 시작 숫자 (기본값 1)
SyntaxHighlighter.defaults['auto-links'] = false; // 링크 설정 (기본값 true)
SyntaxHighlighter.all();
</script> 
 
<!--End of SyntaxHighlighter--> 

 

그리고 미리보기나 저장을 눌러 확인해보면 소스코드가 예쁘게 포스팅 되어 있는 것을 볼 수 있다.

 

 

 

 

 

 

pre 태그의 brush 속성으로는 아래와 같이 정의되어 있다.

	
 
SyntaxHighlighter.autoloader.apply(null, path(
	'applescript            @shBrushAppleScript.js', 
	'actionscript3 as3      @shBrushAS3.js',  
	'bash shell             @shBrushBash.js',  
	'coldfusion cf          @shBrushColdFusion.js', 
	'cpp c                  @shBrushCpp.js', 
	'c# c-sharp csharp      @shBrushCSharp.js', 
	'css                    @shBrushCss.js', 
	'delphi pascal          @shBrushDelphi.js', 
	'diff patch pas         @shBrushDiff.js', 
	'erl erlang             @shBrushErlang.js', 
	'groovy                 @shBrushGroovy.js', 
	'java                   @shBrushJava.js', 
	'jfx javafx             @shBrushJavaFX.js', 
	'js jscript javascript  @shBrushJScript.js', 
	'perl pl                @shBrushPerl.js', 
	'php                    @shBrushPhp.js', 
	'text plain             @shBrushPlain.js', 
	'py python              @shBrushPython.js', 
	'ruby rails ror rb      @shBrushRuby.js',
	'sass scss              @shBrushSass.js', 
	'scala                  @shBrushScala.js', 
	'sql                    @shBrushSql.js', 
	'vb vbnet               @shBrushVb.js', 
	'xml xhtml xslt html    @shBrushXml.js'
));