Tistory 에 SyntaxHighlighter 적용하기

Tistory 자체에서 매우 깔끔한 SyntaxHighlighter 를 제공하기 시작했기 때문에 더이상 아래와 같이 어렵게 설정해줄 필요가 없다.

console.log('손쉽게 코드 하이라이팅이 가능하다.')

코드블럭 메뉴 선택

 

코드블럭 삽입

 

---

Tistory 에 소스코드를 깔끔하게 작성하기 위해서 SyntaxHighlighter 를 사용하면 된다.

http://code.google.com/p/syntaxhighlighter/

[설치방법]
1. SyntaxHighligher 다운 및 압축풀기
2. Tistory 의 Skin 에 파일 업로드 
3. 아래 Script </body> 전에 입력

<script class="javascript" src="./images/shCore.js"></script>
<script class="javascript" src="./images/shBrushCSharp.js"></script>
<script class="javascript" src="./images/shBrushCpp.js"></script>
<script class="javascript" src="./images/shBrushCss.js"></script>
<script class="javascript" src="./images/shBrushDelphi.js"></script>
<script class="javascript" src="./images/shBrushJScript.js"></script>
<script class="javascript" src="./images/shBrushJava.js"></script>
<script class="javascript" src="./images/shBrushPhp.js"></script>
<script class="javascript" src="./images/shBrushPython.js"></script>
<script class="javascript" src="./images/shBrushRuby.js"></script>
<script class="javascript" src="./images/shBrushSql.js"></script>
<script class="javascript" src="./images/shBrushVb.js"></script>
<script class="javascript" src="./images/shBrushXml.js"></script>
<script class="javascript">
    dp.SyntaxHighlighter.ClipboardSwf = './images/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
</script>​

4. 블로그에 적용
아래 태그에 HTML 모드로 전환해서 소스코드를 입력.

<textarea name="code" class="Java">
코드 입력 
</textarea>

@Override 
protected void onCreate(Bundle savedInstanceState) { 	
  // TODO Auto-generated method stub 	
  super.onCreate(savedInstanceState); 	
  setContentView(R.layout.main); 
}