Syntax Highlighter (소스코드 하이라이트)

블로그에서 프로그래밍에 관련된 포스팅을 하다 보면 소스코드를 적어야 하는 경우가 있다.

소스코드를 입력할 경우 불편한 점이 있는데

1. 알아보기 어렵다.
2. 표시되는 소스코드가 깨지는 경우가 있다.
3. 줄번호가 없다.

이를 해결하기 위해 다양한 프로그램들이 있다.

그 중에서 내 블로그에 적용한 것은 SyntaxHighlighter(클릭) 이다.

다른 블로그나 사이트들을 돌아다녀 보면 

사용예 캡쳐

이런 식으로 소스코드가 표시되는 곳이 있는데 이것이 바로 SyntaxHighlighter를 사용한 것이다.

사용예의 원래 코드는 아래 코드이며 (JavaScript)

// SyntaxHighlighter makes your code snippets beautiful without tiring your servers.

// http://alexgorbatchev.com

var setArray = function(elems) {

    this.length = 0;

    push.apply(this, elems);

    return this;

}

사용예와 같이 직접 적용한 모습은 아래와 같다.

// SyntaxHighlighter makes your code snippets beautiful without tiring your servers.
// http://alexgorbatchev.com
var setArray = function(elems) {
    this.length = 0;
    push.apply(this, elems);
    return this;
}

티스토리에서 SyntaxHighlighter 사용법은 

1. 다운로드(클릭)에서 다운로드 받은 후 압축을 풀어준다.
2. 기본 스크립트와 사용할 언어 및 테마를 티스토리(관리자의 HTML/CSS 편집)에 업로드 한다.(C#, Default 테마)
       Scripts 폴더에서 shCore.js 파일과 필요한 언어의 shBrush언어.js 파일 업로드(shBrushJScript.js)
       
   
       Sytels 폴더에서 원하는 스타일 파일 업로드(shCoreDefault.css)
       
       업로드 결과 (HTML/CSS 편집 화면의 파일업로드)
       
   
   

3. 티스토리(관리자의 HTML/CSS 편집)에서 HTML 코드를 수정한다.(헤더 태그 안에 삽입)
       
   

4. 글쓰기에서 적용한다.
       HTML로 아래와 같이 직접 입력해야 한다.     

   // SyntaxHighlighter makes your code snippets beautiful without tiring your servers.
   // http://alexgorbatchev.com
   var setArray = function(elems) {
       this.length = 0;
       push.apply(this, elems);
       return this;
   }
   
               

   
       결과

   // SyntaxHighlighter makes your code snippets beautiful without tiring your servers.
   // http://alexgorbatchev.com
   var setArray = function(elems) {
       this.length = 0;
       push.apply(this, elems);
       return this;
   }
   

- 참고

2015-01-14 현재 최신버전은 3.0.83이다.

SyntaxHighlighter 홈 - http://alexgorbatchev.com/SyntaxHighlighter/

SyntaxHighlighter 다운로드 - http://alexgorbatchev.com/SyntaxHighlighter/download/

언어별 Brush & 스크립트 파일 - http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

테마 예시 - http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/