본문 바로가기

블로그

티스토리에 소스 코드 올리기 - Google SyntaxHighlihter



< 목표 >  티스토리 소스 코드 올리기 - Google SyntaxHighliter


   티스토리에서 프로그래밍 언어를 효과적으로 보여주기 위해서는 어떻게 해야할까?
   곳곳에서 깔끔한 뷰어를 보고 놀라서 어떻게 해야할지 궁금해하다 찾아보았다.
   몇 몇의 블로그에서 소개하고 있었는데, 그 중 핵심적인 내용을 뽑아 올리겠다.

    SyntaxHighlighter 2.0.287 번을 사용하면 손쉽게 만들 수 있다. 
   

 우선 이 파일을 받고 압축을 풀면 세 개의 폴더가 나오는데, 그 중에서 scriptsstyle 풀더에 있는 내용을 티스토리의 스킨의 HTML/CSS편집파일 올리기를 통해 모두 올린다.! 그런 다음에 HTML/CSS편집에서 skin.html에 보면 위쪽에서 대여섯번째 줄에  title head을 찾을 수 있는데 , 그 중간에 다음의 코드를 복사해서 넣는다.
 



 

이렇게 하면 기본적인 세팅은 모두 끝난 상태가 된다.!
이제 사용하는 것만 남았다. 글쓰기를 하면 EDIT가 보이는데, 이를 클릭하면 HTML코드로 입력할 수 있다. 여기서 아래와 같이 입력하고 소스 코드를 복사해 넣으면 깔끔한 소스코드를 볼 수 있다.!!
 
 
    // 코드를 적는다
 
아래는 각 언어별 명칭을 나타낸 표이다.
"brush:명칭"을 쓰면 각 언어별로 표현가능하다.!
 

Brush name Brush aliases File name
Bash/shell bash, shell shBrushBash.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js

Reference : http://gyuha.tistory.com/225
                 http://www.filepang.co.kr/111
                 http://knightbw.tistory.com/134