Syntax Highlighter blogger에 적용하기

가장 대중적인 Syntax Highlighter는 아마도 http://alexgorbatchev.com/SyntaxHighlighter/, 여기서 제공하는 것이다.

Blogger에서 적용하기 위해 아래의 과정을 거쳐야 한다.

Blog에 code 붙이기

1. Dashboard -> Template -> HTML 편집
2. HTML에서 태그를 찾아서 그 위에 아래의 코드를 복사해서 붙인다.

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

3. 미리보기로 다른 레이아웃에 영향이 없는지 확인한다.

실제로 사용하기

1. <pre> 태그 사용
2. <script> 태그 사용(비추, 설명하지 않음, 굳이 보고싶다면 여기로)
<pre> 태그로 사용하는 경우는 아래와 같이 한다.
html 보기로 전환한 후 적용할 코드를 붙이고 그 코드를 <pre> 태그로 감싼다. 그리고 <pre> 태그를 <pre class="brush:{syntax name}> 이런식으로 만들어 주면 된다.

<pre class="brush:html">
Your 'HTML' code goes here
</pre>

그런데 blogger에서는 코드를 저런 식으로 갖다 붙이면 에러가 발생하는 경우가 있는데 그럴 때는 괄호를 < >로 바꿔줘야 한다. Quick Escape에서 바꿔주자. 보이는 창에 html 코드를 갖다 붙이고 체크박스들 아래에 있는 Convert to escaped characters를 클릭하면 변환된 코드가 나오고 그걸 갖다붙이면 된다.

테마 적용하기 아까 붙였던 html 코드에서 아래와 같은 테마부분의 이름을 바꿔주면 된다.

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

Unionpool Lab