Blogger(blogspot) 블로그에 SyntaxHighlighter 적용하기.

안녕하세요.
블로그 생성하고 설정한지 얼마안된 Blogger(blogspot) 초보 블로거 입니다.

블로그 생성과 설정 이후 최초로 한 작업이
블로그에 SyntaxHighlighter를 설정하는 작업이네요.
아무래도 프로그램 관련 자료를 자주 올리게 될거 같아서..

나중에 다시 설정하게 되었을 때 잊어버리지 않기 위해
이렇게 블로그에 써서 남기려 합니다.

일단 SyntaxHighlighter를 적용하기 위해서는
SyntaxHighlighter 홈페이지에 가봐야겠죠~^^
홈페이지 : http://alexgorbatchev.com/SyntaxHighlighter/

(홈페이지에서 관련 자료 및 도움말 등을 참고하시면 됩니다.)

일단 적용하는 방법에는 두가지가 있는데요.
첫번째는 모듈을 블로그에 업로드하고 적용하는 방법과
두번째는 업로드할 공간이 없거나 할 수 없거나 귀찮을때
모듈을 적용할 수 있는 주소 링크를 사용해서 적용하는 방법입니다.

저는 귀찮은 관계로 두번째 방법으로 적용했답니다. ^^;;;
첫번째 방법이야 인터넷 검색하믄 아주 지대로 잘 나오니 구지 쓰진 않겠습니당. ㅋ

그럼 이제 블로그의 꾸미기 >> HTML 편집 메뉴를 선택하고
SyntaxHighlighter 설정 소스를 첨가해주믄 됩니당.

<!-- At least one brush, here we choose JS. -->
<!-- You need to include a brush for every language you want to highlight -->
<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js'></script>
<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js'></script>

<!-- Include *at least* the core style and default theme -->
<link rel='stylesheet' type='text/css'
href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css'/>
<link rel='stylesheet' type='text/css'
href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css'/>

<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js'></script>
<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js'></script>
<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js'></script>
<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js'></script>
<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js'></script>
<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js'></script>
<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js'></script>
<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js'></script>
<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js'></script>
<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js'></script>
<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js'></script>
<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js'></script>
<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js'></script>
<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js'></script>
<script type='text/javascript'
src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js'></script>

<script type='text/javascript'>
SyntaxHighlighter.all();
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.config.bloggerMode = true;
</script>

위와 같이 설정해주면 이제 SyntaxHighlighter를 사용할 수 있는 환경이 완성된답니다.
그럼 아래와 같이 글을 쓰게 되면
<pre class="brush: js; smart-tabs: true">
/**
 * SyntaxHighlighter
 */
function foo()
{
 if(counter <= 10)
  return;
 // it works!
}
</pre>

아래와 같이 화면에 보여질 거예요. ^^
/**
 * SyntaxHighlighter
 */
function foo()
{
 if(counter <= 10)
  return;
 // it works!
}

그럼 모두모두 저와 같이 적용해 보아요~^^