Blogger 如何讓程式碼變色好閱讀 source code syntax highlight

這個中文標題真的有點難下
我是用英文去找才知道人家用 syntax highlight 這個字眼

剛剛為了寫前一篇 S3 的文章
去查了怎麼讓 source code 在 blogger 顯示的比較好看的方法
找了好幾篇
也裝了好幾套
覺得這套比較好

SyntaxHighlighter

<!-- begin syntax hightlight -->
<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/shThemeEmacs.css' rel='stylesheet' type='text/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/shBrushBash.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/shBrushCSharp.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/shBrushDelphi.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/shBrushGroovy.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/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/shBrushRuby.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.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 src='http://www.undermyhat.org/blog/wp-content/uploads/2009/09/shBrushMatlabSimple.js' type='text/javascript'></script> 
 
<script language='javascript'>  
    SyntaxHighlighter.config.bloggerMode = false;  
    SyntaxHighlighter.config.stripBrs = true;  
    SyntaxHighlighter.defaults['wrap-lines'] = false;  
    SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';  
    SyntaxHighlighter.all();  
</script>
<!-- end syntax hightlight -->

寫部落格的時候
只要用 <pre> 把程式碼包起來即可


<pre class="brush: php">
    source code...
</pre>

就大功告成啦

--
後記

編寫程式碼到部落格的時候
一些奇怪的字元需要做 html 編碼
可能會需要一些工具
http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/encode.aspx

或是上 google 找
encode to html online
就可以找到一些線上工具

不然像貼
<?php
這種 code
會被 blogger 的編輯器檔下來