구글 블로그에 SyntaxHighlighter 적용하기

블로그 포스팅시 소스코드를 일반 테스트가 아닌 소스코드 편집기 화면과 같이 표현할 수 있는 방법이 있다.
바로 SyntaxHighlighter 이다.

SyntaxHighlighgter 적용 방법은 다운로드와 링크 2가지가 있는데 링크 방법을 알아보자.

1. Blogger에 로그인 한 후 템플릿 - HTML 편집으로 들어간다.

2. HTML 편집에서 다음과 같이 header가 끝나기 전에 아래의소스를 추가하고 템플릿 저장을 누른다.

<link href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css" rel="stylesheet" type="text/css"/>
<link href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css" rel="stylesheet" type="text/css"/>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJava.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js" type="text/javascript">
</script>
<script language="javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

이제 블로그에서 소스를 작성하고 스타일을 적용하는 방법은 글을 작성할 때 html로 작성하여 아래와 같이 작성한 소스에 <pre class="brush:cpp"> 를 추가한다. (cpp인 경우)

<pre class="brush:cpp">
#include <stdio.h>
main()
{
     printf("Hello World");
     return;
}
</pre>

이렇게 작성하면 결과가 다음과 같다.

#include <stdio.h>

main()

{

     printf("Hello World");

     return;

}

아래는 작성할 수 있는 brush의 종류들이다.