def helloWorld():
print "hello, world!"
블로그에 위와 같이 가독성좋은 스타일로 소스코드를 업로드하기 위해 이용할 수 있는 대표적인 방법이 SyntaxHighlighter 를 이용하는 방법이다.
설치방법은 검색해보면 다른 블로그에서도 충분히 설명이 잘 되어 있으니 굳이 여기서 다시 구체적으로 설명할 필요는 없을 것 같고,
(좋은 링크 : 'cocosoft' 님의 SyntaxHighlighter 소개글)
정말 간단하게만 설명하겠다.
1. SyntaxHighlighter 홈페이지 > Download 섹션에서 최신버전 다운로드
http://alexgorbatchev.com/SyntaxHighlighter/
2. 압축해제. 다양한 폴더가 나옴
3. scripts, styles 폴더 전체를 블로그에 업로드
(+ Tistory 유저라면 관리 페이지>HTML/CSS 편집>파일 업로드로 한꺼번에 추가 가능)
(+ 물론 필요한 언어팩과 스타일만 설치할수도 있지만, 용량도 몇KB 단위라 얼마 안되고 그냥 아 귀찮아 하는분들을 위해서...)
4. 스킨 HTML 파일 수정
(+ Tistory 유저라면 skin.html 수정페이지에서 수정)
(+ SyntaxHighlighter 스타일은 header 부분에 추가. 볼드체 부분을 다른 스타일로 수정가능)
<link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css">
(+ 사용할 언어팩 지정은 body 에서 수정. 물론 필요한 것만 추가해도 됨.)
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.js"></script>
<script type="text/javascript" src="./images/shBrushAppleScript.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushColdFusion.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushErlang.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJavaFX.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushObjC.js"></script>
<script type="text/javascript" src="./images/shBrushPerl.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPowerShell.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushSass.js"></script>
<script type="text/javascript" src="./images/shBrushScala.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushVb.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
5. 이제 사용하면 되는데 <pre> 를 사용하는 방법과 <script> 를 사용하는 방법이 있음.
<pre class = "brush: (언어)">
... source code...
</pre>
<script type="syntaxhighlighter" class="brush: (언어)">
...source code...
</script>
둘다 장단점이 있는데 그건 원래 홈페이지 Document 참고.