티스토리에서 프로그래밍 언어를 효과적으로 보여주기 위해서는 어떻게 해야할까?
곳곳에서 깔끔한 뷰어를 보고 놀라서 어떻게 해야할지 궁금해하다 찾아보았다.
몇 몇의 블로그에서 소개하고 있었는데, 그 중 핵심적인 내용을 뽑아 올리겠다.
SyntaxHighlighter 2.0.287 번을 사용하면 손쉽게 만들 수 있다.
syntaxhighlighter_2.0.287.zip우선 이 파일을 받고 압축을 풀면 세 개의 폴더가 나오는데, 그 중에서 scripts와 style 풀더에 있는 내용을 티스토리의 스킨의 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
굿.. 아~ 개운해~
