2010. 6. 9. 19:26 Programming/Install&Tip
[펌] 티스토리에 소스 코드 올리기 - Google SyntaxHighlihter
티스토리에서 프로그래밍 언어를 효과적으로 보여주기 위해서는 어떻게 해야할까?
곳곳에서 깔끔한 뷰어를 보고 놀라서 어떻게 해야할지 궁금해하다 찾아보았다.
몇 몇의 블로그에서 소개하고 있었는데, 그 중 핵심적인 내용을 뽑아 올리겠다.
SyntaxHighlighter 2.0.287 번을 사용하면 손쉽게 만들 수 있다.
우선 이 파일을 받고 압축을 풀면 세 개의 폴더가 나오는데, 그 중에서 scripts와 style 풀더에 있는 내용을 티스토리의 스킨의 HTML/CSS편집의 파일 올리기를 통해 모두 올린다.! 그런 다음에 HTML/CSS편집에서 skin.html에 보면 위쪽에서 대여섯번째 줄에 title과 head을 찾을 수 있는데 , 그 중간에 다음의 코드를 복사해서 넣는다.
이렇게 하면 기본적인 세팅은 모두 끝난 상태가 된다.!
이제 사용하는 것만 남았다. 글쓰기를 하면 EDIT가 보이는데, 이를 클릭하면 HTML코드로 입력할 수 있다. 여기서 아래와 같이 입력하고 소스 코드를 복사해 넣으면 깔끔한 소스코드를 볼 수 있다.!!
아래는 각 언어별 명칭을 나타낸 표이다.
"brush:명칭"을 쓰면 각 언어별로 표현가능하다.!
Reference : http://gyuha.tistory.com/225
http://www.filepang.co.kr/111
곳곳에서 깔끔한 뷰어를 보고 놀라서 어떻게 해야할지 궁금해하다 찾아보았다.
몇 몇의 블로그에서 소개하고 있었는데, 그 중 핵심적인 내용을 뽑아 올리겠다.
SyntaxHighlighter 2.0.287 번을 사용하면 손쉽게 만들 수 있다.
우선 이 파일을 받고 압축을 풀면 세 개의 폴더가 나오는데, 그 중에서 scripts와 style 풀더에 있는 내용을 티스토리의 스킨의 HTML/CSS편집의 파일 올리기를 통해 모두 올린다.! 그런 다음에 HTML/CSS편집에서 skin.html에 보면 위쪽에서 대여섯번째 줄에 title과 head을 찾을 수 있는데 , 그 중간에 다음의 코드를 복사해서 넣는다.
01.
<
script
src
=
"./images/shCore.js"
type
=
"text/javascript"
></
script
>
02.
<
script
src
=
"./images/shBrushBash.js"
type
=
"text/javascript"
></
script
>
03.
<
script
src
=
"./images/shBrushCpp.js"
type
=
"text/javascript"
></
script
>
04.
<
script
src
=
"./images/shBrushCSharp.js"
type
=
"text/javascript"
></
script
>
05.
<
script
src
=
"./images/shBrushCss.js"
type
=
"text/javascript"
></
script
>
06.
<
script
src
=
"./images/shBrushDelphi.js"
type
=
"text/javascript"
></
script
>
07.
<
script
src
=
"./images/shBrushDiff.js"
type
=
"text/javascript"
></
script
>
08.
<
script
src
=
"./images/shBrushGroovy.js"
type
=
"text/javascript"
></
script
>
09.
<
script
src
=
"./images/shBrushJava.js"
type
=
"text/javascript"
></
script
>
10.
<
script
src
=
"./images/shBrushJScript.js"
type
=
"text/javascript"
></
script
>
11.
<
script
src
=
"./images/shBrushPhp.js"
type
=
"text/javascript"
></
script
>
12.
<
script
src
=
"./images/shBrushPlain.js"
type
=
"text/javascript"
></
script
>
13.
<
script
src
=
"./images/shBrushPython.js"
type
=
"text/javascript"
></
script
>
14.
<
script
src
=
"./images/shBrushRuby.js"
type
=
"text/javascript"
></
script
>
15.
<
script
src
=
"./images/shBrushScala.js"
type
=
"text/javascript"
></
script
>
16.
<
script
src
=
"./images/shBrushSql.js"
type
=
"text/javascript"
></
script
>
17.
<
script
src
=
"./images/shBrushVb.js"
type
=
"text/javascript"
></
script
>
18.
<
script
src
=
"./images/shBrushXml.js"
type
=
"text/javascript"
></
script
>
19.
<
link
href
=
"./images/shCore.css"
type
=
"text/css"
rel
=
"stylesheet"
><
link
href
=
"./images/shThemeDefault.css"
type
=
"text/css"
rel
=
"stylesheet"
>
20.
<
script
type
=
"text/javascript"
> SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf'; SyntaxHighlighter.all();</
script
>
이제 사용하는 것만 남았다. 글쓰기를 하면 EDIT가 보이는데, 이를 클릭하면 HTML코드로 입력할 수 있다. 여기서 아래와 같이 입력하고 소스 코드를 복사해 넣으면 깔끔한 소스코드를 볼 수 있다.!!
1.
<
pre
class=
"brush: cpp"
>
2.
// 코드를 적는다
3.
</
pre
>
"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
'Programming > Install&Tip' 카테고리의 다른 글
우분투에 opencv 2.2 설치하기 (0) | 2011.10.08 |
---|---|
sqlyog 무료버전 (0) | 2011.09.05 |
linux install tip (0) | 2010.06.07 |
tar & gz & bz2 사용법 (0) | 2009.05.31 |