Blogger 에 SyntaxHighLighter 적용하기

블로그에 소스코드를 이쁘게 표시하기 위해서 사용하는 SyntaxHighlighter(http://alexgorbatchev.com/SyntaxHighlighter/) 를 Blogger 에 적용해 보자.
호스팅서버를 운영하거나 tistory 같은 경우 직접 css 와 자바스크립트 파일을 업로드해 적용하는데 구글 블로거의 경우는 SyntaxHighlighter 주소의 파일로 링크를 걸어 사용해야 한다.
블로거 -> 템플릿 -> HTML 편집 -> <head> </head> 사이에 다음을 추가한다.

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript"></script>

이제 포스팅시 다음과 같이 코드를 <script> 태그로 java, c++, xml 등을 설정하여 감싸면 된다.

<script type="syntaxhighlighter" class="brush: c++">
<![CDATA[
#include <stdio.h>

int main()
{
    printf("Hello World.\n");
    return 0;
}
]]></script>

* 사족  : blogger 에서 syntaxhighlighter 를 사용했던 포스트 내용이 모두 삭제되는 경우를 경험해서 사용하지 않는다.ㅠㅠ

comments:

댓글 쓰기