Archive for ‘ 2007

在 Blogger 中使用 dp.SyntaxHighlighter 显示程式码

db.SyntaxHighlighter 是一支不错的程式码高亮度显示程式,特点为:

  1. 显示行号
  2. 支援12种程式语言
  3. 模组化加载需要的程式语言
  4. 支援 “<pre>” 及 “<textarea>” 区块
  5. 纯文字检视
  6. 复制到剪贴簿
  7. 直接打印程式码

缺点就是加载速度较慢。

安装步骤

  1. 修改 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 上,你可以视情况下载回来放到自己的服务器)

  2. dp.SyntaxHighlighter 原本已经有一个 CSS 档了,但如果将这个 CSS 档以 “Link” 的方式加载,却无法正常显示。所以,请自行增加下列 CSS 到 blogger 样板的 CSS 区段:
    /*dp.highlighter*/
    .dp-highlighter {
      font-family: "Consolas", "Courier New", Courier, mono;
      font-size: 12px;
      background-color: #E7E5DC;
      width: 99%;
      overflow: auto;
      margin: 18px 0px 18px 0px;
      padding-top: 1px; /* adds a little border on top when controls are hidden */
      border:1px inset;
      max-height:200px;
    }
    .dp-highlighter .bar {
      padding-left: 45px;
    }
    .dp-highlighter.collapsed .bar,
    .dp-highlighter.nogutter .bar {
      padding-left: 0px;
    }
    .dp-highlighter ol {
      list-style: decimal; /* for ie */
      list-style: decimal-leading-zero; /* better look for others */
      background-color: #fff;
      margin: 0px 0px 1px 45px; /* 1px bottom margin seems to fix occasional Firefox scrolling */
      padding: 0px;
      color: #5C5C5C;
    }
    .dp-highlighter.nogutter ol {
      list-style-type: none !important;
      margin-left: 0px;
    }
    .dp-highlighter ol li,
    .dp-highlighter .columns div {
      border-left: 3px solid #6CE26C;
      background-color: #f8f8f8;
      padding-left: 10px;
      line-height: 14px;
    }
    .dp-highlighter.nogutter ol li,
    .dp-highlighter.nogutter .columns div {
      border: 0;
    }
    .dp-highlighter .columns {
      color: gray;
      overflow: hidden;
      width: 100%;
    }
    .dp-highlighter .columns div {
      padding-bottom: 5px;
    }
    .dp-highlighter ol li.alt {
      background-color: #fff;
    }
    .dp-highlighter ol li span {
      color: Black;
    }
    /* Adjust some properties when collapsed */
    .dp-highlighter.collapsed ol {
      margin: 0px;
    }
    .dp-highlighter.collapsed ol li {
      display: none;
    }
    /* Additional modifications when in print-view */
    .dp-highlighter.printing {
      border: none;
    }
    .dp-highlighter.printing .tools {
      display: none !important;
    }
    .dp-highlighter.printing li {
      display: list-item !important;
    }
    /* Styles for the tools */
    .dp-highlighter .tools {
      padding: 3px 8px 3px 10px;
      font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
      color: silver;
      background-color: #f8f8f8;
      text-align1: right;
      padding-bottom: 10px;
      border-left: 3px solid #6CE26C;
    }
    .dp-highlighter.nogutter .tools {
      border-left: 0;
    }
    .dp-highlighter.collapsed .tools {
      border-bottom: 0;
    }
    .dp-highlighter .tools a {
      font-size: 9px;
      color: #a0a0a0;
      text-decoration: none;
      margin-right: 10px;
    }
    .dp-highlighter .tools a:hover {
      color: red;
      text-decoration: underline;
    }
    /* About dialog styles */
    .dp-about { background-color: #fff; margin: 0px; padding: 0px; }
    .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
    .dp-about td { padding: 10px; vertical-align: top; }
    .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
    .dp-about .title { color: red; font-weight: bold; }
    .dp-about .para { margin: 0 0 4px 0; }
    .dp-about .footer { background-color: #ECEADB; border-top: 1px solid #fff; text-align: right; }
    .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; width: 60px; height: 22px; }
    /* Language specific styles */
    .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; }
    .dp-highlighter .string { color: blue; }
    .dp-highlighter .keyword { color: #069; font-weight: bold; }
    .dp-highlighter .preprocessor { color: gray; }
  3. 储存即可

使用方法

  • 方法一 - 使用 “<textarea>” 区块,需将 “&” 转换为 “&amp;”:
    <textarea name="code" class="程式语言">
    程式码
    </textarea>
  • 方法二 - 使用 “<pre>” 区块,需将 “&” 转换为 “&amp;”、”<” 转换为 “&lt;”、”>” 转换为 “&gt;”:
    <pre name="code" class="程式语言">
    程式码
    </pre>

参考网页

在 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

在 Linux 中安装 MPlayer

Linux 上的 MPlayer 就好比是 Windows 上的 KMPlayer 或暴风影音,内含 Player 及各种 Codec,只要安装好,就可以播放任何格式的影片及音乐档,以下介绍 MPlayer 的 TarBall 及 RPM 的安装方法。

安装好之后,"mplayer" 为文字接口的播放程式,而 "gmplayer" 为图形接口的播放程式。下列的安装步骤,如果选用 TarBall 的方式安装,在安装时则已设定好中文接口了,而 RPM 的方式只能装在 CentOS 4.x 或 RHEL 4.x 的版本,并且接口为英文。

以原始码 TarBall 方式的安装步骤

  1. 先安装可能缺少的套件:
    yum install libpng*
    yum install gtk2-devel
  2. 下载并复制 codec:
    cd /usr/local/src
    wget http://www.mplayerhq.hu/MPlayer/releases/codecs/all-20061022.tar.bz2
    tar -jxvf all-20061022.tar.bz2
    mv all-20061022 /usr/lib/codecs
  3. 下载 mplayer 原始档:
    cd /usr/local/src
    wget http://www.mplayerhq.hu/MPlayer/releases/MPlayer-1.0rc1.tar.bz2
    tar -jxvf MPlayer-1.0rc1.tar.bz2
    cd MPlayer-1.0rc1
  4. 编译及安装 mplayer (安装路径为 "/usr/local/MPlayer1.0"):
    ./configure --enable-gui --with-codecsdir=/usr/lib/codecs --with-win32libdir=/usr/lib/codecs --with-reallibdir=/usr/lib/codecs --with-xanimlibdir=/usr/lib/codecs --disable-inet6 --language=zh_TW,en --prefix=/usr/local/MPlayer1.0 --charset=utf8
    make
    make install
  5. 设定字幕的字库 (其中的 ukai.ttf 可替换为任何 Unicode 的中文字库):
    cp /usr/share/fonts/chinese/TrueType/ukai.ttf ~/.mplayer/subfont.ttf
  6. 安装默认的 skin 给 gmplayer 使用:
    wget http://www1.mplayerhq.hu/MPlayer/Skin/PowerPlayer-1.1.tar.bz2
    tar -jxvf PowerPlayer-1.1.tar.bz2
    mv PowerPlayer /usr/local/MPlayer1.0/share/mplayer/skins/default
  7. 建立程式联结,以便直接执行执行程式:
    ln -s /usr/local/MPlayer1.0/bin/mplayer /usr/local/bin/
    ln -s /usr/local/MPlayer1.0/bin/gmplayer /usr/local/bin/
  8. 额外的 Skin 可以到这里下载,下载完,请解开放到 [/usr/local/MPlayer1.0/share/mplayer/skins/]

以 RPM 方式安装步骤(仅适用于 CentOS 4.x 或 RHEL 4.x)

  1. 下载 RPM 档:
    mkdir /tmp/mplayer
    cd /tmp/mplayer
    wget http://ftp.wl0.org/RPMS-rhel4-various/mplayer-1.0pre7-2.i386.rpm
    wget http://ftp.wl0.org/RPMS-rhel4-various/mplayer-gui-1.0pre7-2.i386.rpm
    wget ftp://fr2.rpmfind.net/linux/falsehope/home/rathann/apt/7.3/RPMS.stable/mplayer-skin-default-1.0-2.noarch.rpm
  2. 进行安装:
    rpm -ivh *.rpm
  3. 取代字幕的字库(其中的 ukai.ttf 可替换为任何 Unicode 的中文字库):
    cp /usr/share/fonts/chinese/TrueType/ukai.ttf /usr/share/mplayer/subfont.ttf
  4. 额外的 Skin 可以到这里下载,下载完,请解开放到 [/usr/share/mplayer/Skin/]

疑难杂症

  • Q. 播放影片时,无法显示中文字幕?

    A. 到 [喜好设定] -> [字幕及OSD],将 "编码" 选 "繁体中文字集 (BIG5)",将 "统一码字幕" 打勾.再到 [字型] 将 "编码" 选 "统一码"。

  • Q. 播放影片时,影片无法缩放大小?

    A. 到 [喜好设定] -> [视讯],将 "可用的驱动程式" 选 "gl2" 或别的类型,再重新启动程式播放影片。

在 CentOS 4.x 安装 Subversion 1.4.3

Subversion (简称 SVN) 是目前最热门的版本控制套件,因为语法与 CVS 相近,又是改良自 CVS,几乎所有平台的 OS 都有支援,目前正快速地进占版本控制的霸主地位。以下介绍 Subversion 在 CentOS 4.x 或 RHEL 4.x 下的安装步骤。

安装 Subversion

安装步骤:

  1. 先移除系统上的 Subversion 1.2.x
    rpm -e subversion
  2. http://summersoft.fay.ar.us/pub/subversion/latest/rhel-4/i386/ 下载最新版的 subversion,下载符合下一个步骤中相同名称的 rpm 套件。
  3. 依序安装:
    rpm -U apr-x.x.x-x.i386.rpm
    rpm -U apr-util-x.x.x-x.i386.rpm
    rpm -ivh subversion-x.x.x-x.i386.rpm
    rpm -ivh mod_dav_svn-x.x.x-x.i386.rpm
    rpm -ivh subversion-perl-x.x.x.x.i386.rpm
    rpm -ivh subversion-tools-x.x.x-x.i386.rpm
  4. 这样就 OK 了!

以 SVN+SSH 存取档案库

使用 “SVN+SSH” 的存取方式就是直接使用主机上的用户帐号做存取。而你所要被用户存取的档案库其实就是一个子目录,因此要存取的用户必须有可以读取及写入该目录的权限。

语法:

svn+ssh://帐号@主机名称/档案库绝对路径

范例:

svn+ssh://[email protected]/var/svn/repositories

其中 user1 必须要在 192.168.1.1 这台主机上有 [/var/svn/repositories] 目录的读取及执行权限 (建议设为群组)

从 Web 存取档案库

网页主机需安装有 “dav_svn_module” 模组,在 httpp.conf 内设定:

LoadModule dav_svn_module modules/mod_dav_svn.so
LoadModule authz_svn_module modules/mod_authz_svn.so
<location>
DAV svn
#设定 SVN 储存库的根目录
SVNParentPath /var/svn
#设定 SVN 储存库的目录
#SVNPath /var/svn/repositories
Satisfy Any
Require valid-user
AuthType Basic
AuthName "SVN Repository"
#用户认证的帐号/密码档 (使用 htpasswd 建立)
AuthUserFile /etc/svn/svn_htusers
#用户存取权限设定档
AuthzSVNAccessFile /etc/svn/svn_access
</location>

参考网页

在 Linux 中切换默认的桌面

在 Linux 中切换默认桌面的指令为:

switchdesk

ex. 切换为 KDE 桌面:

switchdesk kde

KDE 与 GNome 桌面的执行指令分别为 startkde 与 gnome-session

[Perl]Perl 的相关网页资源

手册

教学/手册

Read more

在 Windows 使用“非对称金钥”来远端登入 SSH 的方法

在 Linux Server 下使用 SSH 的“非对称金钥”来进行远端登入的方式相信大家应该都不陌生 (没实做过的可参考鸟哥或 study-area 的文件),下面我所要介绍的是在 Windows 下使用金钥来远端登入 SSH 的方法。

开始之前,先说一下“非对称金钥”:

“非对称金钥”是一种加密机制,由用户端以特定的加密算法产生两把“非对称”金钥: 即“公钥 (Public-Key)”与“私钥 (Private-Key)”。然后我们会把“私钥”留在自己的电脑,再把“公钥”传送到远端主机,当两把金钥碰在一起就会进行加解密比对,以确认是否彼此的身份是可以信任的,藉以执行特定的作业。

说得更简单一点,与其说是“公钥”与“私钥”,不如说是“锁头”与“钥匙”,由我自己来打造一组锁头及钥匙,我把这个锁头装在一个门上,然后我就可以用我的这一把钥匙来打开这扇门了! 同时呢,我也可以把相同的锁头装在很多的门上,那我就可以用这一把钥匙来开启很多门了…这样子的概念是否有比较清楚了呢?!

Read more

Linux 磁盘相关指令

磁盘分割

磁盘代号说明:

  1. IDE 硬盘,第一到四颗分别为: hda, hdb, hdc, hdd
  2. SATA 或 SCSI 硬盘,第一到四颗分别为: sda, sdb, sdc, sdd

Read more

return top