Tistory에 SyntaxHighlighter 1.5.1과 2.0 동시 설치 하기..

블로그에 코드를 입력한 후 사용자가 좀 더 편리하게 볼 수 있도록 해 주는 SyntaxHighlighter..

코드 복사는 물론 뷰페이지도 자체 제공 합니다.

 

2.0 버전이 2009년에 나온 것으로 알고 있습니다.

하지만 저는 1.5.1 버전을 전에 설치 해 놓았었는데요..

 

2008/12/30 - [Computer/ETC] - 블로그에 코드 입력

 

업그레이드가 되는 줄 알았더니.

업그레이드는 안되고. 재 설치 하는 형태이더군요..

 

그렇게 되면 이전 코드 들도 전체 수정이 되어야 하는 아주.. 안 좋은 현상이 발생 되는 상황이라.

적용하지 않고 있었습니다.

 

하지만 오늘은 둘 다 동작 할 수 있도록 파일 명을 좀 바꿔 줬습니다.

물론 Tistory에 해당하는 내용입니다.

 

파일명만 좀 바꿔 주니  잘 동작 됩니다..

앞으로는 2.0으로만 작성 하려고 합니다. *_*;

 

자 이제 설치 해 보도록 하겠습니다.

설치 라기 보다는 파일 업로드군요 *_*;;;
업로드 하기 전 반듯이 백업은 필수 입니다.
스킨 저장이 있으니 스킨 저장을 이용하세요..

 

홈페이지는 아래 링크를 이용하시면 되고요…

 

http://alexgorbatchev.com/wiki/SyntaxHighlighter

 

 

다운로드는 아래 링크에서 하시면 됩니다.

 

http://alexgorbatchev.com/downloads/grab.php?name=sh

 

한글로 다운 로드에 대한 설명도 나와 있습니다. *_*

 

다운로드한 Zip 파일의 압축을 풀게 되면 아래와 같은 구조입니다.

 

 

Scripts 안에 파일을 보시면

 

 

이런 형태로 되어 있습니다.

파일 이름 변경은 아래와 같이 합니다.

 

기존 파일이름 : shBrushAS3.js

수정 파일이름 : shABrushAS3.js

 

예.. 그렇습니다. 단순히 Brush 앞에 A 하나 더 붙였습니다.

 

그럼 test.html 의 내용을 확인 해 볼까요?

 

 

여기서도 동일합니다.

shBrushAS3.js ==> shABrushAS3.js 로 변경하십니다.

즉.

 

모든 js, css, swf의 파일 이름을 변경하십니다.

 

그리고 또.. Tistory에 맞게 변경 되어야 되는 부분이...

 

Tistory에서는 폴더를 지원하지 않습니다..

images 폴더 하나뿐이라서.

scripts, styles 이라는 폴더는 존재 및 생성 되지 않습니다.

images 폴더를 선택 하는 방법도 "images/~~" 이 형태는 안되고 "./images/~~" 와 같은 형태여야 됩니다.

 

 

결론은 위와 같이 이렇게 변경되어야 합니다.

 

그리고 tisotry 관리자 모드로 들어가셔서 스킨 ==> Html/CSS 편집 ==> 파일 업로드

에서 파일 업로드 하시고.

 

위와 같이 수정된 코드를 html/css 편집에서 추가 하시면 됩니다.

 

1.5.1 버전에서는 무조권 최 하위에 입력하여야 했으나 2.0부터는 상관 없습니다.

그러니.

 

아래와 같이 하셔도 됩니다.

 

 

이렇게 하고 미리보기 하셔서 적용 되는지 확인해 보시면 됩니다.

 

그리고 아래는 적용 예제입니다.

 

SyntaxHighlighter Ver. 1.5.1

	

		

			
test
		
	

 

SyntaxHighlighter Ver. 2.0

	

		

			
test
		
	

 

버전업 되면서 디자인도 깔금해진거 같아요~ ㅎㅎ

 

이상입니다.
감사합니다.