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 class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushPython.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushRuby.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushCss.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushCpp.js'></script>
<script class='javascript'>
dp.SyntaxHighlighter.ClipboardSwf = 'http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
(因為 “偷吃步” 的關係,程式直接連到 dp.SyntaxHighlighter 的 SVN 上,你可以視情況下載回來放到自己的伺服器)
dp.SyntaxHighlighter 原本已經有一個 CSS 檔了,但如果將這個 CSS 檔以 “Link” 的方式載入,卻無法正常顯示。所以,請自行增加下列 CSS 到 blogger ...
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 的 SVN 上,你可以視情況下載回來放到自己的伺服器)
繼續搜尋 “<body>”,在標籤內的 onload 事件加入:
prettyPrint();
儲存即可。
使用方法
使用 “<pre>” 區塊,需將 “&” 轉換為 “&”、”<” 轉換為 “<”、”>” 轉換為 “>”:
<pre class="prettyprint">
程式碼
</pre>
參考網頁
使用 dp.SyntaxHighlighter 顯示程式碼
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>”,在標籤內的 onload 事件加入:
if(window.readMore){readMore();}
繼續在下一行加入:
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var tagSpan = document.getElementsByTagName('span');
var more1 = new Array();
var more2 = new Array();
function readMore(){
var ...