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

    
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 nameBrush aliasesFile 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
Posted by 한효정

블로그 이미지
착하게 살자.
한효정

카테고리

공지사항

Yesterday
Today
Total

달력

 « |  » 2024.12
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

최근에 올라온 글

최근에 달린 댓글

글 보관함