티스토리에 구글 syntaxhighlighter 적용하기 (3.0.8)

구글 SyntaxHighlighter는 블로그 본문에 각종 소스코드를 입력할때 줄번호 표시 및 예약어의 색을 다르게 표현하여 해당 컨텐츠를 보기 편하게 해주는 스타일과 자바스크립트 들의 덩어리이다.

다음 예제를 보자..

public class Main {
     public static void main(String[] args)  {
           System.out.println("Hello, World!!"); 
     }
}

자신이 알고 있는 다른 서버에 SyntaxHighlighter가 이미 설치되어 있다면 그것을 사용하면 되겠지만 어디에 설치되어 있는지도 모르겠고 티스토리에 업로드하여 사용하는게 편하겠다 싶으면 다음과 같이 설치하여 사용하면 된다.

1. 프로그램 다운로드 받기
    : SyntaxHighlighter 홈페이지에 가서 해당 프로그램을 다운로드 받는다. 현재 가장 최신 버전은 3.0.8이다.
      다운로드 페이지 : http://alexgorbatchev.com/SyntaxHighlighter/download/

2. 압축 풀기
: 다운로드 받은 파일의 압축을 풀어보면 다음과 같이 구성되어 있다.

     다른 부분은 상관없이 브러쉬 등의 자바 스크립트 파일이 들어있는
     scripts 폴더와 css 파일이 잔뜩 들어있는 styles 폴더만 중요하다.
     왜냐면, 이 파일들은 티스토리 서버로 올라갈 애들이니까..

3. 파일 올리기
    : scripts, css 폴더에 속한 모든 파일을 서버로 올린다. 디렉토리는 새로 만들 수 없으니 그냥 줄줄이 올리면 된다.

4. 업로드한 스크립트 적용하기
: 필요한 파일을 올렸으니 작성한 글에 해당 스크립트가 반영될 수 있도록 skim.html을 수정해주어야 한다.

<head>와 </head> 사이에 다음과 같이 추가하자. (여기부터 여기까지 라고 적힌 그 사이의 것들만 추가하면 됨)

이제 모든 준비는 끝났고, 사용만 하면 된다.

5. 사용하기
자바 소스코드를 추가하는 경우를 보자. 두가지 방법이 있는데.....

    5-1) PRE 태그를 이용하는 방법
      (1) 에디터를 잠시 HTML 모드로 변신 시키고
      (2) PRE 태그 사이에 브러쉬를 지정하고 PRE 태그 사이에 원하는 내용을 적어주면 된다.

5-2) script 태그를 이용하는 방법 (이 방법이 여러 브라우저에서 깔끔히 나오는 듯)

(1) 에디터를 잠시 HTML 모드로 변신 시키고

(2) script 태그 사이에 브러쉬를 지정하고 원하는 내용을 적어준다.

6. 기타
1) 브러쉬 확인하기
: 다운로드 받았던 파일 중에 shBrushxxx.js 들이 모두 브러쉬 파일이다. shBrushJava.js 파일을 열어보면 다음과 같은 부분이 있다.

 
	Brush.aliases	= ['java'];

즉, 자바 소스코드를 표현하기 위한 브러쉬 이름은 java 이다.

하나 더 확인해보자.

 
	Brush.aliases	= ['js', 'jscript', 'javascript'];

자바스크립트의 경우 js, jscript, javascript 브러쉬 이름이 3가지 이다.
그런데 이상하게 shBrushXml.js에 있는 브러쉬 이름들은 왜 안 먹지??

   2) 테마 확인하기
       : 다운로드 받았던 파일 중에 shThemexxx.css 들이 모두 테마 파일이다.
         마음에 드는 테마가 있다면 skin.html에서 적절히 파일명을 수정해주면 된다.

'생활' 카테고리의 다른 글

티웨이 항공 (0)	2011.02.17
비누 장미 (0)	2011.02.12
다운로드 쿠폰 (0)	2011.02.11

티스토리에 구글 syntaxhighlighter 적용하기 (3.0.8)

'생활' 카테고리의 다른 글

티스토리툴바