Syntax Highlighter 설정

source : how to setup syntax highlighter on blogger

구글 블로거에서 코드 Syntax Highlighting 하기 위해 이것 저것 봤는데,
이게 젤 깔끔한 거 같다.

1. 먼저, 기존 template code를 백업한다.







2. HTML 수정 모드로 template 열어서, </b:skin> 태그 앞에다가 다음 css 전체를 붙여넣기 한다.

3.</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>


4. </body> 태그 앞에다가 다음 코드를 붙여넣는다.
<script language='javascript'>
  dp.SyntaxHighlighter.BloggerMode();
  dp.SyntaxHighlighter.HighlightAll('code');
</script>


5. template을 저장한다.







6. 이제 <pre></pre> 태그로 syntax highlighting을 사용할 준비가 됐다.
<pre name="code">
...Your html-escaped code goes here...
</pre>
<pre name="code" class="php">
    echo "I like PHP";
</pre>

7. 여기에서 html 코드를 escape 할 수 있다.







8. 여기에 class 속성에 설정할 수 있는 지원 언어 목록.