主要練習如何能用最簡單的方式展現程式碼，
以及如何修改 google blog 中的一些程式，
算一算從上次 po 文到現在竟然差了十個月，
整個介面更新的讓我好不習慣，
甚至連原本使用的 fancybox 也不能用了(會和 picasa 相衝突)，
所以光是熟悉相關介面又花了一些時間...
好了開場白不多說，這第一篇主要是介紹 SyntaxHighlighter 這個東東，
SyntaxHighlighter 是一套javascript用來美化在網頁上的程式碼，
當然如果你是使用 Wordpress 就直接使用 WP-CodeBox 就可以了。
SyntaxHighlighter：http://alexgorbatchev.com/SyntaxHighlighter/
WP-CodeBox：http://wordpress.org/extend/plugins/wp-codebox/
不過 SyntaxHighlighter 就是有個缺點，
當產生顏色判斷的 js 還沒有 load 進來的時候，
會有一段 "沒有顏色的程式碼" 到 "有顏色的程式碼" 之間的間隔時間，
而且在最新版本所公告的 issue 中也有提到，
pre 標籤內的部分標籤必須經過轉譯才可以正常顯示，
不然會被判斷為標籤。
http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
關於 js 檔案 load 進來前顯示問題的解決方式，
我使用了 jQuery 產生一個 loading 圖片，
當整個頁面完整載入後，才會呈現出內容的程式碼，
如此就可以避免掉中間延遲的時間差，
頁面也不會上下跳來跳去(因為 style 不同)，
不過因為今天時間有點晚了，
且這也不是我第一篇程式文章要訴諸的重點(重點就是我又要開始寫 blog 啦)，
所以就先寫到這邊，
下一篇再來做一下筆記是如何修改的吧，
喔哈~
SyntaxHighlighter 是一套javascript用來美化在網頁上的程式碼，
當然如果你是使用 Wordpress 就直接使用 WP-CodeBox 就可以了。
SyntaxHighlighter：http://alexgorbatchev.com/SyntaxHighlighter/
WP-CodeBox：http://wordpress.org/extend/plugins/wp-codebox/
不過 SyntaxHighlighter 就是有個缺點，
當產生顏色判斷的 js 還沒有 load 進來的時候，
會有一段 "沒有顏色的程式碼" 到 "有顏色的程式碼" 之間的間隔時間，
而且在最新版本所公告的 issue 中也有提到，
pre 標籤內的部分標籤必須經過轉譯才可以正常顯示，
不然會被判斷為標籤。
http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
關於 js 檔案 load 進來前顯示問題的解決方式，
我使用了 jQuery 產生一個 loading 圖片，
當整個頁面完整載入後，才會呈現出內容的程式碼，
如此就可以避免掉中間延遲的時間差，
頁面也不會上下跳來跳去(因為 style 不同)，
不過因為今天時間有點晚了，
且這也不是我第一篇程式文章要訴諸的重點(重點就是我又要開始寫 blog 啦)，
所以就先寫到這邊，
下一篇再來做一下筆記是如何修改的吧，
喔哈~
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Hello World</title>
</head>
<body>
<script src="jquery-1.7.1.min.js"></script>
<script>
$(function () {
alert("Hello World !!")
});
</script>
</body>
</html>
沒有留言:
張貼留言