2011年7月6日 星期三

終於搞定了,在 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
還有很多,請參考官網支援高亮語言項目
還可以有多種風格自行選用,
更多用法也請自行參考官網。

沒有留言:

張貼留言