Archive for ‘ 七月, 2007 ’

在 Blogger 中使用 google-code-prettify 顯示程式碼

google-code-prettify 是一支不錯的程式碼高亮度顯示程式，特點為:

  1. 支援 15 種程式語言(但某些語言似乎還沒完成)
  2. 程式僅兩個檔案
  3. 載入速度較快

缺點為:

  1. 跟 IE 的相容性比較不佳，在 IE 內複製程式碼時無換行符號
  2. 無行號顯示
  3. 僅支援 "<pre>" 區塊
  4. 程式碼過長時不會自動顯示捲軸 (可透過修改 CSS 解決)

安裝步驟

  1. 修改 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 上，你可以視情況下載回來放到自己的伺服器)

  2. 繼續搜尋 "<body>"，在標籤內的 onload 事件加入: 
    prettyPrint();
  3. 儲存即可。

使用方法

      使用 "<pre>" 區塊，需將 "&" 轉換為 "&amp;"、"<" 轉換為 "&lt;"、">" 轉換為 "&gt;":
<pre class="prettyprint">
程式碼
</pre>

參考網頁

在 Blogger 的文章中加入 "隱藏內文/繼續閱讀" 功能

Blogger 中的文章因為沒有 「隱藏內文」 及 「繼續閱讀」 的功能，所以就會把整個網頁拉得很長，較不利於閱讀。並且，如果文章內有很多圖片的話，那載入的時間就會變得很長。

以下的內容是我參考其它 Blogger 的做法所做的改良，主要的不同，就是我覺得其它 Blogger 在載入時會先顯示全文，再做隱藏，視覺上的效果比較不好，我把它改成一開始就會隱藏內文了，也可以避免自動載入內文的圖片。

安裝步驟

  1. 編輯樣版，搜尋 「</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>
  2. 繼續搜尋 「<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 x = 0;
  for(var i=0; i&lt;tagSpan.length; i++){
    if(tagSpan[i].id == 'fullpost'){
      more1[x] = tagSpan[i];
      var readMore = document.createElement('a');
      readMore.setAttribute('id','read-more');
      readMore.setAttribute('href','javascript:toggleMore('+x+')');
      readMore.setAttribute('onclick','toggleMore('+x+');return false;');
      readMore.appendChild(document.createTextNode('Read more &gt;&gt;'));
      more2[x] = more1[x].parentNode.insertBefore(readMore,more1[x]);
      x++;
    }
  }
}
function toggleMore(theElement,theStatus){
  if(theStatus == true || more1[theElement].style.display=='' || more1[theElement].style.display=='none'){
    more1[theElement].style.display = 'block';
    more2[theElement].innerHTML = '&lt;&lt; Less';
//  more2[theElement].parentNode.removeChild(more2[theElement]);
  }else{
    more1[theElement].style.display = 'none';
    more2[theElement].innerHTML = 'Read more &gt;&gt;';
  }
}
function expandAll(theStatus){
  for(var i=0; i&lt;more1.length; i++){
    toggleMore(i,theStatus);
  }
}
</script>
</b:if>

    請注意一下程式碼的第 25 行，如果將前面的註解拿掉，則訪客展開內文之後，」Read more」 的連結就會自動消失了。

  3. 儲存即可

使用方式

    你必需在 Blogger 編輯文章時使用 「修改 HTML」 模式，在要顯示/隱藏內文的部份用下列標籤包起來:

    前文
<span id="fullpost">
欲隱藏的內文
</span>

全部展開/隱藏全文

    你如果想要增加一個的控制項，可以用來展開或隱藏所有文章的內文，則請自行新增一個 「HTML/Javascript」 網頁元素，內容:

    <input id="expand-all" onclick="if (window.expandAll){expandAll(this.checked)}" type="checkbox">
<label for="expand-all">Expand All</label>

解決 「隱藏內文/繼續閱讀」 失效的問題

安裝 VMware 的 VMware-Tools

在 VMware 安裝完虛擬電腦的 GuestOS 後，第一件事就要裝 VMware-Tools 了，VMware-Tools 主要是更新一些 for 你安裝的 GuestOS 的 Driver，讓這一台虛擬電腦可以跑得正常、跑得順暢，最重要的是，滑鼠可以在 HostOS 跟 GuestOS 之間自由穿梭。
Read more

RETURN HOME

INFORMATION

我們解決了什麼問題？我們創造了什麼價值？

return top