每月彙整：七月 2007
在 Blogger 中使用 dp.SyntaxHighlighter 顯示程式碼
db.SyntaxHighlighter 是一支不錯的程式碼高亮度顯示程式，特點為: 顯示行號 支援12種程式語言 模組化載入需要的程式語言 支援 “<pre>” 及 “<textarea>” 區塊 純文字檢視 複製到剪貼簿 直接列印程式碼 缺點就是載入速度較慢。 安裝步驟 修改 blogger 樣板，搜尋 “</body>”，在 “上方” 加入(你可以選擇你要的語言載入即可): <script class=’javascript’ src=’http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shCore.js’></script> <script class=’javascript’ src=’http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushPhp.js’></script> <script class=’javascript’ src=’http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushJScript.js’></script> <script class=’javascript’ src=’http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushSql.js’></script> <script class=’javascript’ src=’http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushXml.js’></script> <script class=’javascript’ src=’http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushDelphi.js’></script> <script … 繼續閱讀
在 Blogger 中使用 google-code-prettify 顯示程式碼
google-code-prettify 是一支不錯的程式碼高亮度顯示程式，特點為: 支援 15 種程式語言(但某些語言似乎還沒完成) 程式僅兩個檔案 載入速度較快 缺點為: 跟 IE 的相容性比較不佳，在 IE 內複製程式碼時無換行符號 無行號顯示 僅支援 “<pre>” 區塊 程式碼過長時不會自動顯示捲軸 (可透過修改 CSS 解決) 安裝步驟 修改 blogger 樣板，搜尋 “</head>”，在 “上方” 加入 <link href=’http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css’ type=’text/css’ rel=’stylesheet’ /> <script type=’text/javascript’ src=’http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js’></script> (因為 “偷吃步” 的關係，程式直接連到 google-code-prettify … 繼續閱讀
在 Blogger 的文章中加入 "隱藏內文/繼續閱讀" 功能
Blogger 中的文章因為沒有 “隱藏內文” 及 “繼續閱讀” 的功能，所以就會把整個網頁拉得很長，較不利於閱讀。並且，如果文章內有很多圖片的話，那載入的時間就會變得很長。 以下的內容是我參考其它 Blogger 的做法所做的改良，主要的不同，就是我覺得其它 Blogger 在載入時會先顯示全文，再做隱藏，視覺上的效果比較不好，我把它改成一開始就會隱藏內文了，也可以避免自動載入內文的圖片。 安裝步驟 編輯樣版，搜尋 “</head>”，在其上方加入: <b:if cond=’data:blog.pageType != "item"‘> <style> #fullpost { clear:both; display:none; } #read-more { float:left; color:#FFFFFF; background-color:#00FF00; border:1px outset; padding:2px; text-decoration:none; font-weight:bold; font-family:Arial; } </style> </b:if> 繼續搜尋 “<body>”，在標籤內的 … 繼續閱讀