본문 바로가기

YStory/Blog

Google code, SyntaxHighlighter

동안 tistory에서 이런 기능이 안될리가 없을거라 생각 하고 있었는데,
역시나 구글은 대단하다. -_-;; 구글에서 제공한다는 사실에 다시 한번 놀랐다.
http://code.google.com 여기서 지원하는데 아직 한국어 웹은 제공하지 않는다.

다운받거나 정보를 얻으려면 여기를 방문 하면 되고 지금 최신 버전인 SyntaxHighlighter_1.5.1을
아래에 올려두겠다. 이제 다운받고 압축을 풀었다면 3개의 디렉토리가 생성된다.

사용자 삽입 이미지
Styles 디렉토리에는 css 파일이 들어 있고 Scripts와 Uncompressed 폴더에는 같은
내용이 들어 있으므로 둘중 하나를 선택해서 업로드 하면 되겠다. (둘중 어떤걸 선택해도  상관없다)

티스토리 관리의 스킨탭 직접올리기로 가서 Styles 폴더와  둘중 하나(필자의 경우 Scripts 폴더)를 모두 드래그 하여 업로드 한다.

그리고 나서 html/css편집 모드로 들어가자.

skin.html 상단쪽을 살펴보면 <head>가 있고 그안에 보면 ./style.css 파일 혹은 그보다 더 많은
css 파일들이 있을텐데 그곳에 아래를 추가한다. ./style.css 보단 아래에 위치하도록 하자.




이제 skin.html 하단쪽을 보면 </body> 가 끝나는 부분이 있다.
끝나기 바로 전에 다음을 추가하자.




여기서 shCore.js 파일은 항상 위에 있어야만 정상 동작 하며, 그외에 있는 것들은 자신이 사용고자 하는 언어만 추가 해주면 된다. 다시말해 위에 있는 모든것을 추가 할 필요는 없다는 거다.

이걸로 설치는 끝이다.
사용법도 그리 어렵지 않다....

<textarea name="code" class="c" cols="60" rows="10">
    insert code
</textarea>

포스팅 할때 html 로 작성하기를 눌러 <textarea name="code" class="c" cols="60" rows="10"> 을 적어주고
코드를 입력한 다음
</textarea> 로 닫아 주면 되겠다.

딱  봐도 어려울건 없어 보이는데 아직 내가 잘 모르는 건지, C 언어 몇개 집어 넣어 봤더니 주석이 심하게 커지는 현상이 생긴다. 한글 이어서 그랬나,,
그리고 html편집이 아니고는 입력을 할수도 없었다.
어딘가에서 작성한 다음 copy / paste 하는게 안전한듯 하다.

아무튼 좋은 기능이지만 아직까지 안정화 되진 못한거 같다.

p.s
여기서 class뒤에 넣는 언어 형태는 아래 표의 명칭을 참고 하면 된다.


언어  명칭
C++ cpp, c, c++
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt



http://gyuha.tistory.com/193 에서 참조

'YStory > Blog' 카테고리의 다른 글

티스토리 Comment(덧글)창에 이미지 삽입하기  (1) 2008.07.25