[網站日誌]SyntaxHighlighter之Code Block

SyntaxHighlighter可以顯示程式碼區塊並且以顏色區分語法(Syntax)，這對於開發有所幫助，這樣也方便觀看和討論，跳轉後有講解如何放到部落格。

下面的表格是簡單快速的方法，選一個主題(Theme)，再選需要支援的語言，按Get Code，然後複製貼上就行啦！

Syntax Highlighter Scripts Generator for Blogger

Select a Theme

Default	RDark	Midnight	MDUltra
FadeToGrey	Emacs	Eclipse	Django

Select Brushes

ActionScript3	Bash/shell	ColdFusion	C#
C++	CSS	Delphi	Diff
Erlang	Groovy	JavaScript	Java
JavaFX	Perl	PHP	Plain Text
PowerShell	Python	Ruby	Scala
SQL	Visual Basic	Xml, xhtml, xslt, Html

Copyright © 2011 All Rights Reserved by Nitin Maheta @ Making Different

再來就是編輯文章的HTML，並且加入下面的tag，js是JavaScript的意思，可以改成其他的，像是csharp是C#，完整的表格可以參考原網址，有一件要注意的事情是，雖然下面看到的是<(小於符號)，但實際上是&lt;，所以別忘了把所有的<替換成&lt;，儘管官網這樣講，但是我還是遇到不少問題，所以我就乾脆把所有的HTML Entities改成那種格式，順便也自己寫個轉換的小程式。

<pre class="brush: js">
  // Code Here
</pre>

所以上面的Code Block在程式碼裡面就變成下圖！

感覺這樣就大功告成的，對不對？錯了！發現Chrome有Bug，行號怪怪的，十的10分開成兩行，變成下圖。

找了找，終於找到答案，把shCore.css裡面的padding: 0 0.5em 0 1em !important;改成padding: 0 5px !important;就行啦！

至於改了之後怎麼辦呢，呵呵，方法有幾個，一個是用Google Code來存css和js檔，另一個就是放在其他網路空間，但是這都不保險，所以我就決定放在自己的部落格！把JavaScript Code和CSS Code改成JavaScript和CSS程式碼就行了！這樣更省去連到別人網站的時間，而且我討厭麻煩，有些時候更新的版本反而會有臭蟲(Bug)，既然現在的版本沒問題，就沒必要用新的，所以乾脆直接把內容存在我自己的部落格！（備註：URL or FileName只是參考用的，有或沒有都行）

<!--URL or FileName-->
<script type="text/javascript">
<!--

  // JaveScript Code

// -->
</script>

<!--URL or FileName-->
<style type="text/css">

  // CSS Code

</style>

這樣就真的大功告成啦！！！

最後，想要複製的話，在程式碼區塊點兩下就可以全選，然後就可以複製了，不用Flash也行！