블러그 소스 표현을 위한 javascript Syntax Highlighting scripts 설치

블러그 소스 표현을 위한 javascript Syntax Highlighting scripts 설치

 

개발환경 : SyntaxHighlighter3.08,  window 7 32bit

 

블러그 아티클에서 소스를 표현하기 위해 javascript Syntax Highlighting 를 몇 년

동안 사용해 왔다. HTML 과 소스가 충돌하게 되면 화면이 깨지고 소스 표현이

제대로 되지 않는다. 그리고 깔끔하게 소스가 표현되기 떄문에 보기에도 좋다.

 

1. SyntaxHighlighter 3.08 업버전 설치

 

SyntaxHighlighter 이전 버전을 갈아 치우고 새로운 업버전을 설치 하기로 했다.

몇 년 사이 3.0.8 이 나왔다. 예전에는 java, javascript 등 몇 개만

지원이 되었는데 이제는 아래 그림과 같이 다양한 언어가 지원된다.

그리고 버그도 많이 없어진 것 같다.

설치를 위해 다음 주소로 http://alexgorbatchev.com/ 가서 스크립트를

다운로드 한다.

다운 받은 파일의 압축을 풀고 scripts, styles 에서 shCore.css, shThemeDefault.css, shCore.js

파일을 블러그에서 추가 한다. 기존에 있던 SyntaxHighlighter 파일들은 삭제한다.

두번째는 메인페이지로 가서 위 3개 파일을 include 한다.

세번째는 원하는 언어 스크립트를 추가하고 include 시킨다. 위치는

syntaxhighlighter_3.0.83\scripts 에 가면 있다. 원하는 파일들을 파일업로드로 추가시킨다.

그리고 실행을 위해 SyntaxHighlighter.all() 함수를 추가한다.

이제 준비가 끝났으니 소스에서 표현을 하면 된다. 표현하는 태그는 <pre> 를

사용하며 brush 에 값을 원하는 언어로 써 주면 된다. Brush 에 들어갈 각

언어에 명칭은 제일 상단 그림을 참조하기 바란다. 

function foo()
{
}

 

2. 소스 Highlighter 표현을 위한 다양한 프로그램들

 

SyntaxHighlighter 외에 쓸만한 몇가지 프로그램들이 있는데

몇가지 소개 하고자 한다.

 

(1) SHJS

http://shjs.sourceforge.net/ 

(2) beautyOfCode

http://startbigthinksmall.wordpress.com/2008/10/30/beautyofcode-jquery-plugin-for-syntax-highlighting/

(3) Chili

http://code.google.com/p/jquery-chili-js/

(4) Lighter.js

https://github.com/pradador/Lighter/

(5) HighLight.js

http://softwaremaniacs.org/soft/highlight/en/

(6) DlHighlight

http://mihai.bazon.net/projects/javascript-syntax-highlighting-engine