HighLight：程式碼顯示的美化工具

在Blog裡顯示程式碼經常都有繁瑣的程序，我使用過dp.SyntaxHighlighter、CodePress與Syntax Highlighting in JavaScript等JavaScript程式庫，功能各有高低但都必須在網站上存放JavaScript檔案，若存放的網站發生問題或不再提供服務（如Google Page Creator即是）時，原先貼入程式碼的文章就會發生問題，最後我反而覺得倒不如直接列入HTML格式的程式碼就好，如此就不會受限於外部網站或Blog的＜PRE＞、＜XMP＞的處理規則了。

HighLight的操作很簡單：指定好要操作的檔案與輸出格式後，指定輸出選項，再按〔Convert files〕就可以了。輸出選項如下圖所示有四大項：

1. 行號格式：要讓程式碼標上行號的話必須勾選本項設定，行號的號碼要用HTML的OL+LI格式輸出時則再將【HTML ordered list】打勾，使用OL+LI的好處是在此格式下按左鍵選取程式碼時不會選取到行號號碼，若未勾選則行號號碼會一併被選取到。另外在FireFox下還要自行將＜/li＞
   刪去，否則每行會多出一行空行，IE則能正確顯示。

2. 換行處理：當一行程式超過網頁右邊界時要如何處理，在後面有簡單說明。
3. 是否輸出表頭和表尾：若是要貼到Blog裡，一般是不需要勾選的
4. 樣式的輸出方式：標籤樣式可以產生成外部的.CSS檔，或內嵌在標籤裡，為求簡單則勾選之以使用內嵌格式

按下〔Convert files〕後就會將加上.html的檔名產生在指定的資料夾裡，用記事本等文書編輯程式讀取並選取到剪貼簿後，全部貼到Blog文章的原始碼裡即可。

再來說明換行的處理對輸出造成的影響。在沒有勾選Line wrap的情況時，程式碼超過右邊界時不做任何處。

勾選了【Line Wrap】，則超出右邊界的「有些」會被切到下一列開頭。由下圖可以看到並不是每行都會成功換行。

再勾【Intelligent Wrap】時，部份超出右邊界的程式會被切到下一列並對齊上一行的較後面位置。要採用那種換行顯示悉聽尊便。

HighLight是很方便的程式碼輸出工具，又是自由軟體，推薦大家多多使用。

• 下載：http://www.andre-simon.de/zip/download.html
• 支援的輸出格式：HTML, XHTML, RTF, TeX, LaTeX, SVG與XML
• 支援的輸入語言：超過120種程式語言
• 能選用的輸出樣式：40種

最後貼上我的Ubiquity命令程式做為範例：

/*
  * V1.0.1 2008/09/01
  * V1.0.2 2008/09/26 加入plurk指令
  * V1.0.3 2008/09/27 改進plurk, 在開頭加入qualifier動詞
  * V1.0.4 2008/09/28 改進plurk, qualifier動詞-語系, 如loves-cn, loves-en
  */
CmdUtils.CreateCommand({
  name: "funp",
  author: { name: "emisjerry"},
  contributors: ["emisjerry"],
  license: "GPL",
  description: "選取好描述文字，把本篇文章貼上推推王",
  takes: {"輸入標籤名稱": noun_arb_text},
  icon: "http://funp.com/favicon.ico",
  execute: function(directObject) {
    var _sSelection = CmdUtils.getSelection();
    //window.alert(_sSelection + ':' + context.focusedWindow.location.href);
    var _aTags = directObject.text.split(" ");  // 把輸入字串分成陣列
    var _sTags = "";
    for (var ele in _aTags) {
      _sTags += "&tags[]=" + encodeURIComponent(_aTags[ele]);
    }
    if (_sTags == "") _sTags = "&tags[]=科技";  // 未輸入標籤則預設為科技
    else _sTags = _sTags.replace(/tech/, '科技');  // 把tech標籤換成科技, 加快輸入速度
    Utils.openUrlInBrowser("http://funp.com/push/submit/?popup&url=" +
      encodeURIComponent(context.focusedWindow.location.href) +
      "&t="+encodeURIComponent(_sSelection)+_sTags);
  }
});
 
CmdUtils.CreateCommand({
  name: "dict",
  author: { name: "emisjerry"},
  contributors: ["emisjerry"],
  license: "GPL",
  description: "Yahoo!奇摩字典",
  takes: {"要翻譯的字彙": noun_arb_text},
  icon: "http://tw.dictionary.yahoo.com/favicon.ico",
  execute: function(directObject) {
    Utils.openUrlInBrowser("http://tw.dictionary.yahoo.com/search?ei=UTF-8&p=" +
      directObject.text );
  }
});
 
CmdUtils.CreateCommand({
  name: "cdic",
  author: { name: "emisjerry"},
  contributors: ["emisjerry"],
  license: "GPL",
  description: "教育部國語辭典",
  takes: {"要翻譯的字彙": noun_arb_text},
  //icon: "http://tw.dictionary.yahoo.com/favicon.ico",
  execute: function(directObject) {
    Utils.openUrlInBrowser( "http://140.111.34.46/cgi-bin/newDict/dict.sh?idx=dict.idx&pieceLen=50&fld=1&imgFont=1&cond=" +
 (directObject.text));
  }
});
 
/*
 * Original author: http://theunfocused.net/moz/ubiquity/verbs/, Blair McBride
 * Copied from http://www.plurk.com/user/fortelin
 * sample: plurk loves Plurking test.
 */
CmdUtils.CreateCommand({
  name: "plurk",
  takes: {status: noun_arb_text},
 
  homepage: "http://theunfocused.net/moz/ubiquity/verbs/",
  author: {name: "Blair McBride", homepage: "http://theunfocused.net/"},
  modifier: {name: "Jerry Chien"},
  license: "MPL",
 
  preview: function(previewBlock, statusText) {
    var previewTemplate = "將要發佈的內容如下: 
" +
                          "${status}

" +
                          " 總字數為: ${chars}";
    var truncateTemplate = "
後面 ${truncate} " +
                           "個字將予以刪除!";
    var previewData = {
      status: statusText.text,
      chars: statusText.text.length
    };
 
    var previewHTML = CmdUtils.renderTemplate(previewTemplate,
                                                    previewData);
 
    if(previewData.chars > 140) {
      var truncateData = {
        truncate: previewData.chars - 140
      };
 
      previewHTML += CmdUtils.renderTemplate(truncateTemplate,
                                                   truncateData);
    }
 
    previewBlock.innerHTML = previewHTML;
  },
 
  execute: function(statusText) {
    if(statusText.text.length < 1) {
      displayMessage("Plurk 內容不可空白");
      return;
    }
    var _sQualifier = "says";
    var _sLang = "tr_ch";  // 預設為繁體中文
    var _sText = statusText.text;
    var _iIndex = _sText.indexOf(" ");
    var found = false;
    if (_iIndex > 0) {
      var _aQualifiers = ["loves","likes","shares","gives","hates","wants",
        "wishes","has","will","wonders","asks","was","feels","thinks","says","is"];
      var _sVerb = _sText.substring(0, _iIndex);  // 要使用的qualifier
      var _iIndex2 = _sVerb.indexOf("-");  // loves, loves-tw, loves-cn, loves-en, 減號後面加語系
      if (_iIndex2 > 0) {
        var _sVerbLang = _sVerb.substring(_iIndex2+1).toLowerCase();
        if (_sVerbLang=="tw") _sLang = "tr_ch";
        else _sLang = _sVerbLang;
 
        _sVerb = _sVerb.substring(0, _iIndex2);  // loves-cn ==> loves
      }
      for (var ele in _aQualifiers) {
        if (_sVerb==_aQualifiers[ele]) {
          found = true;
          _sQualifier = _sVerb;
          _sText = _sText.substring(_iIndex+1);
          break;
        }
      }
    }
 
    var updateUrl = "http://www.plurk.com/TimeLine/addPlurk";
    var updateParams = {
      uid: 3170067,
      qualifier:_sQualifier,
      lang:_sLang,  // en
      content: _sText
    };
 
    jQuery.ajax({
      type: "POST",
      url: updateUrl,
      data: updateParams,
      dataType: "json",
      error: function() {
        displayMessage("Plurk 發佈錯誤");
      },
      success: function() {
        displayMessage("Plurk 發佈成功");
      }
    });
  }
});

##

您可能也會有興趣的類似文章

• 快速參考卡網站; Quick Reference Card Site (0則留言, 2005/01/14)
• Android Studio的安裝、設定與執行 (4則留言, 2013/10/03)
• 用Ubiquity快速發佈 Plurk 訊息-改良版 (0則留言, 2008/09/27)
• 用Ubiquity快速發佈Plurk訊息－用%l替換網址 (0則留言, 2008/10/07)
• 用Ubiquity快速發佈 Plurk 訊息 (4則留言, 2008/09/26)
• 新增加的FireFox Ubiquity指令：books、k+與en2zh (0則留言, 2008/10/18)
• 簡單的Mozilla Ubiquity應用2：將目前網頁貼上推推王的命令 (3則留言, 2008/08/31)
• 簡單的Mozilla Ubiquity應用：Yahoo!奇摩字典的查詢命令 (1則留言, 2008/08/30)
• jQuery在Xuite的測試 (0則留言, 2007/10/01)
• 噗浪新功能：透過電子郵件／行動電話 plurk (13則留言, 2010/08/18)
• [HTML&CSS] 鎖定左側功能選單，不隨頁面捲動 (0則留言, 2007/04/05)
• 三款「桌面便利貼」試用、剖析與建議 (3則留言, 2008/05/03)
• 網路衝浪新幫手－無所不在的Firefox Ubiquity (10則留言, 2008/12/16)
• 第4個jqGrid範例: 資料列處理 (15則留言, 2010/02/14)
• 第一個jqGrid範例：Local array (1則留言, 2010/02/13)