[Blogger] code Highlight - 程式碼高亮

今天一直在找該怎麼把程式碼美美的貼在bloger上
試了很多種，有些不是不能用就是很麻煩
最後選了這套 Snippet ，這是用jqeury實現的，方法也很簡單
加上原本就有jquery的底，用起來更是順手 (不過缺點是肥了一點)

依網站上的教學可以快速地完成佈署
不過有些仍然沒有很完美，例如pre會換行..

程式碼換行感覺就蠻奇怪的..所以改了一下 css  (加這行 white-space: nowrap; )
可是這樣好像又會被版型擋住，只好再寫一段小程式碼，讓滑鼠一過去時顯示捲軸

以下是我的設定檔，供大家參考

<link href='jquery.snippet.min.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='jquery-1.4.4.min.js'/>
<script language='javascript' src='jquery.snippet.js'/>

<script language='javascript'>
$(function(){
    $('pre.csharp').snippet('csharp', { transparent: true, style: 'ide-codewarrior' });
    $('pre.cpp').snippet('cpp', { transparent: true, style: 'ide-codewarrior' });
    $('pre.c').snippet('c', { transparent: true, style: 'ide-codewarrior' });
    $('pre.css').snippet('css', { transparent: true, style: 'ide-codewarrior' });
    $('pre.html').snippet('html', { transparent: true, style: 'ide-codewarrior' });
    $('pre.javascript').snippet('javascript_dom', { transparent: true, style: 'ide-codewarrior' });
    $('pre.php').snippet('php', { transparent: true, style: 'ide-codewarrior' });
    $('pre.python').snippet('python', { transparent: true, style: 'ide-codewarrior' });
    $('pre.sql').snippet('sql', { transparent: true, style: 'ide-codewarrior' });
    $('pre.xml').snippet('xml', { transparent: true, style: 'ide-codewarrior' });
    $('pre').hover(function(){ $(this).css('overflow','auto') }, function(){ $(this).css('overflow','hidden') });
});
</script>

在 jquery.snippet.min.css 改一下這段

.snippet-wrap pre.sh_sourceCode{
    padding:1em 0em 1em 0em;
    line-height:20px;
    overflow:hidden;
    position:relative;
    white-space: nowrap;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    box-shadow: 2px 2px 5px #000;
    -moz-box-shadow: 2px 2px 5px #000;
    -webkit-box-shadow: 2px 2px 5px #000;
}

不過一想到現在要把文章裡面的程式碼都翻新一便就很頭大~"~