티스토리에서 코드 올리기

<pre class="brush: cpp"> ~~ </pre>



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

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

syntaxhighlighter_2.0.287.zip

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

 

view source

print?

01.<SCRIPT type=text/javascript src="./images/shCore.js"></SCRIPT>

02.<SCRIPT type=text/javascript src="./images/shBrushBash.js"></SCRIPT>

03.<SCRIPT type=text/javascript src="./images/shBrushCpp.js"></SCRIPT>

04.<SCRIPT type=text/javascript src="./images/shBrushCSharp.js"></SCRIPT>

05.<SCRIPT type=text/javascript src="./images/shBrushCss.js"></SCRIPT>

06.<SCRIPT type=text/javascript src="./images/shBrushDelphi.js"></SCRIPT>

07.<SCRIPT type=text/javascript src="./images/shBrushDiff.js"></SCRIPT>

08.<SCRIPT type=text/javascript src="./images/shBrushGroovy.js"></SCRIPT>

09.<SCRIPT type=text/javascript src="./images/shBrushJava.js"></SCRIPT>

10.<SCRIPT type=text/javascript src="./images/shBrushJScript.js"></SCRIPT>

11.<SCRIPT type=text/javascript src="./images/shBrushPhp.js"></SCRIPT>

12.<SCRIPT type=text/javascript src="./images/shBrushPlain.js"></SCRIPT>

13.<SCRIPT type=text/javascript src="./images/shBrushPython.js"></SCRIPT>

14.<SCRIPT type=text/javascript src="./images/shBrushRuby.js"></SCRIPT>

15.<SCRIPT type=text/javascript src="./images/shBrushScala.js"></SCRIPT>

16.<SCRIPT type=text/javascript src="./images/shBrushSql.js"></SCRIPT>

17.<SCRIPT type=text/javascript src="./images/shBrushVb.js"></SCRIPT>

18.<SCRIPT type=text/javascript src="./images/shBrushXml.js"></SCRIPT>

19. <LINK rel=stylesheet type=text/css href="./images/shCore.css"><LINK rel=stylesheet type=text/css href="./images/shThemeDefault.css">

20.<SCRIPT type=text/javascript> SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf'; SyntaxHighlighter.all();</SCRIPT>

이렇게 하면 기본적인 세팅은 모두 끝난 상태가 된다.!
이제 사용하는 것만 남았다. 글쓰기를 하면 EDIT가 보이는데, 이를 클릭하면 HTML코드로 입력할 수 있다. 여기서 아래와 같이 입력하고 소스 코드를 복사해 넣으면 깔끔한 소스코드를 볼 수 있다.!!

view source

print?

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

 Copied From: http://knightbw.tistory.com/192