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 top