본문 바로가기
Programming

Syntax Highlighter 2.0을 tistory 에서 설치해보자.

by leanu 2009. 3. 6.

여러 블로그를 돌아다니면서 소스코드를 보다가, 좋은 툴을 보게되어 소개해본다.

Syntax Highlighter는 소스를 좀 더 보기 편하게 하기 위해 사용하는 것으로, 아마 소스를 찾기위해 이곳저곳을 돌아다닌 사람들은 한번쯤은 보지 않았을까 싶다. 바로 아래와 같이 말이다.






Installation
----------------------------------------------------------------------------------------

아래의 링크를 통해 파일을 받아 압축을 풀면 scripts 와 styles 폴더가 보일 것이다.

Syntax Highlighter site : SyntaxHighlighter

Tistory 의 자기 블로그 관리 페이지로 들어가서 스킨 -> HTML/CSS 편집 으로 이동한다.

파일 업로드 탭을 눌러서 좀전에 받아놓은 scripts와 styles 폴더내에 있는 모든 파일을 업로드 한다.

업로드가 완료되면 HTML/CSS편집 탭으로 이동하여 skin.html 을 수정한다.
</head> 태그 바로 위에 아래의 코드를 삽입한다.





pre는 여러가지 범용 소스를 붙여넣다보면 사용하기 불편하다. 이런경우
textarea 태그를 사용하면 되는데, textarea 태그를 이용하여 syntax highlighter 를 적용시키려면

관리자 메뉴 -> 스킨 -> HTML/CSS 편집에서 skin.html의 <body> 태크에 OnLoad값을 아래와 같이 넣어야 한다.
 <body Onload="dp.SyntaxHighlighter.HighlightAll('code');">



Simple Usage of SyntaxHighlighter
----------------------------------------------------------------------------------------

Pre 태그로 소스 붙이기 (html 코드 넣기)
   - brush: 뒤에는 사용할 하이라이터 종류를 넣는다. js 는 java script 를 의미한다. 여러가지 alias 종류를
     참조하려면 위의 SyntaxHighlighter 사이트에 들어가면 된다.
<pre class="brush: js">

alert("Hello World");

</pre>


textarea 태그로 소스 붙이기 (c++ 코드 넣기)  
   - rows 나 cols 값은 너무 신경쓰지 않아도 된다.


댓글