티스토리에서 SyntaxHighlighter api 설치방법!!

2012. 1. 18. 09:03Life of AceT/Good Blog Tip

반응형
IT에서 종사하다보니 블로그에 소스코드등을 올리는 경우가 많다.
이럴 경우에 조금 이쁘게 소스코드를 보이게 하기위해서 SyntaxHighlighter 사용을 하기 위해 설정하는 방법을 올려 볼려고 한다.
1. 선행작업
1) API 다운받기
우리는 SyntaxHighlighter 라는 것을 다운 받아야 한다.
where??
Click SyntaxHighlighter download
위의 링크를 눌러서 들어가보면 아래처럼 사이트가 하나 뜬다. 아래의 사이트에서 download를 눌러서 다운을 받으면 된다.



2) 압축풀기


압축을 풀면 위의 그림처럼 scripts와 styles 이라는 폴더가 있을 것 이다. 우리는 그 안에 있는것을 Tistroy에 올려서 사용 할 것이다.

자! 그럼 어디에 또 올리나???


3) 파일 업로드 시키기

위의 그림처럼 추가를 통하여 파일 업로드를 시키면 된다.
무엇을??? scripts, styles 폴더 밑에 있는 모든 파일들을 올리면 된다.


마지막으로~~~Tistory에서 소스를 조금 건들여줘야 한다.

4) 소스 건들이기(tistory)
skin.html 파일 편집 : [ 스킨 ] / [ HTML/CSS편집 ] / [ HTML/CSS 편집 ] 에보면 skin.html이라고 있을 것이다.
편집은 2가지가 있는데 하나는 css와 javascript 선언부분과 간단한 옵션(javascript) 설정 부분이다.

★ css와 javascript 선언부분


위에 그림 처럼 skin.html에 추가를 해주면 된다.
위치는 그럼에 보는것과 같이 의 아래에
추가해주면 된다. 아래의 내용 복사(ctrl+c)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


★ 간단한 옵션(javascript) 설정
간단한 옵션 설정은 그림에서와 같이 </body>위쪽에 아래와 내용을 넣어주면 된다.

 


간단히 보면 SyntaxHighlighter.config.stripBrs = true; 부분은 TISTORY 에서 자동으로
태그를 붙이는 걸 무시하는 옵션이고, SyntaxHighlighter.all();을 해줘야 우리가 사용할 script들을 적용 할 수 있는 것이다.

이제!!! 저장을 하고 사용 하면 되는 것 입니다~~~~~~~야호~~~셋팅 끝!!

허나..사용법이 있다는 사실..!!!



=============================================================
SyntaxHighlighter 사용하기!!!

1) 소스코드가 들어가고 우리가 셋팅한 SyntaxHighlighter 를 쓰고 싶으시다면!! 글쓰기 모드를 html로 하셔야 합니다.

2) <pre> ~ </pre>라는 tag안에 소스코드가 작성되어야 합니다!
=============================================================

소스의 내용은 <pre> ~ </pre> 태그 사이에 넣어주고, class의 brush 속성에 원하는 문법을 지정한다.
예를 들면,
<pre> ~ </pre>
<pre class="brush: sql"> select * tab; </pre>


아래의 그림을 보고 class의 brush 속성에 원하는 문법을 지정! class="brush: java", javascript면 class="brush: js" or class="brush: javascript" 이런식으로 설정하여
<pre> ~ </pre> 사이에 소스코드를 넣어서 사용하면 된다^^

휴;;정리가 잘된건지는 잘모르겠지만...정리는 정말 힘들군요 ㅋㅋㅋ 많은 도움이 되었으면 좋겠습니다.


tip>
<LINK rel=stylesheet type=text/css href="./images/shCoreFadeToGrey.css"> 에서 css를 바꿔주면 스타일이 바뀐다.
ex) shCoreFadeToGrey.css



shCore.css



shCoreEclipse.css


shCoreEmacs.css

-끝~-
반응형