終於搞定了,在 Blog 中秀程式碼範例框prettifier(高亮顏色字體)

以前就看過有人在網頁上秀出程式碼的範例框,
一直不以為意,直到前天在寫 Blog 時發現,要貼的程式碼一多,
會造成困擾,因為要不停的調色及排版.....
後來才想到可以試試看用 Java Script的方式整理出 Code
找了幾篇文章,終於搞懂就是那麼簡單。

參考資料
google-code-prettify
Javascript code prettifier
介紹九種實用的秀程式碼方式(9 Useful Javascript Syntax Highlighting Scripts)
這是我選用的 SyntaxHighlighter 官網
針對 Blog 該如何使用的說明(Adding a Syntax Highlighter to your Blogger blog)

基本上照著使用說明操作一次就完成了,非常簡單
首先在 Blog 中進入 設計 －＞ 修改 HTML

找到 ＜head＞　＜/head＞
這兩段的區間,
把針對 Blog 該如何使用的說明中的程式碼貼到 ＜/head＞ 的前面

＜!--SYNTAX HIGHLIGHTER BEGINS--＞
＜link href=　略...
．．．
＜!--SYNTAX HIGHLIGHTER ENDS--＞

接下來在網頁中加入
＜pre class="brush:vb; toolbar: false;"＞
程式碼放在這裡面
＜/pre＞

或是使用以下的方式
＜script type="syntaxhighlighter" class="brush:html"＞＜![CDATA[
程式碼放在這裡面
]]＞＜/script＞

效果就會像這樣

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        '我是註解
        Dim intI As Integer
        Dim strSum As String = ""

        For intI = 0 To 9
            strSum = strSum & intI.ToString
        Next
        MsgBox(strSum)
    End Sub

當然不只 VB 的 Code
還有很多,請參考官網支援高亮語言項目
還可以有多種風格自行選用,
更多用法也請自行參考官網。