Google Blogger SyntaxHighlighter로 소스코드 이쁘게 삽입하기

 그동안 제가 블로그에 정리했던 샘플 코드들이 위와같이 이쁘지 않았습니다. 구글 블로거에 그냥 텍스트 형식으로 붙여넣기가 되어버리는게 원인이었죠. 이번 포스팅은 구글 블로거에 소스코드를 이쁘게 삽입할 수 있는 신택스 하이라이터(SyntaxHighlighter)를 적용하는 것을 정리해봅니다.

 현재 3.0.83이 최신버전이네요. 최신버전 말고 2.1.382를 사용하시길 추천합니다. 3.0.83 사용했다가 제 블로그 최신 포스팅들이 검색 안되는 문제가 생겨서 블로그 이전하는등 삽질을 했었네요.

 직접다운로드해서 자신의 서버에 설치하거나 자신의 구글 코드 프로젝트에 설치 후 적용하는도 가능한 듯 보이지만, 따로 설치없이 바로 웹 링크를 통해서 적용해보도록 하겠습니다.

 블로거 -> 템플릿에서 사용중인 디자인의 HTML 편집을 클릭합니다.

<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>

<style type="text/css">

.console {

background-color: black;

color: #ffffff;

font-family: Lucida Console;

}

</style>

 </head>가 끝나기전에 위 스샷과 같이 아래의 내용을 추가합니다. bloggerMode = true를 해줘야 구글 블로거에서 정상작동 하는 것 같네요. 기타 설정에 대한 추가 사항은 링크를 확인하세요. 2.1.382 부분을 current라고 해주면 신택스 하이라이트 최신 버전을 사용하게 해줍니다. 특정 버전을 쓰고 싶다면 해당 버전을 기입하면 됩니다.

Brush name	Brush aliases	File name
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

 위는 신택스 하이라이터에서 지원하는 Brush들입니다. 블로거에 적용하고픈 것을 추가하거나 빼시면 됩니다.

 이것으로 적용 작업은 끝입니다. 이제 템플릿 저장을 누른 후 블로그에 글을 작성하면 됩니다.

 <pre class="brush:java"> source code </pre>  이런식으로 HTML을 눌러 작성하면 됩니다.  또는

<script type="syntaxhighlighter" class="brush:java"><![CDATA[
code
]]></script>

 위와 같이해도 됩니다. 자세한건 역시 링크를 확인하세요.

 앞으로 코드 올릴때 이쁘게 올릴 수 있게되었네요~ 시간날때 기존 포스팅들 다 수정해줘야겠습니다.

 최신버전인 3.0.83에 버그가 있는건지 <pre>로 하는건 문제가 있네요. 아래에 있는 부분이 <pre>로 한거고 위에것은 <script> 로 한 것입니다. <script> 로 해주거나 위에 설명처럼 안정화 버전인 2.1.382를 사용하시기 바랍니다.

 3.0.83의 버그가 아니고 xml 입력할 때
<uses-permission android:name="android.permission.INTERNET"/>
이런걸
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
 이런식으로 해주면 됩니다.