HighLight:程式碼顯示的美化工具
在Blog裡顯示程式碼經常都有繁瑣的程序,我使用過dp.SyntaxHighlighter、CodePress與Syntax Highlighting in JavaScript等JavaScript程式庫,功能各有高低但都必須在網站上存放JavaScript檔案,若存放的網站發生問題或不再提供服務(如Google Page Creator即是)時,原先貼入程式碼的文章就會發生問題,最後我反而覺得倒不如直接列入HTML格式的程式碼就好,如此就不會受限於外部網站或Blog的<PRE>、<XMP>的處理規則了。
HighLight的操作很簡單:指定好要操作的檔案與輸出格式後,指定輸出選項,再按〔Convert files〕就可以了。輸出選項如下圖所示有四大項:
- 行號格式:要讓程式碼標上行號的話必須勾選本項設定,行號的號碼要用HTML的OL+LI格式輸出時則再將【HTML ordered list】打勾,使用OL+LI的好處是在此格式下按左鍵選取程式碼時不會選取到行號號碼,若未勾選則行號號碼會一併被選取到。另外在FireFox下還要自行將</li>
刪去,否則每行會多出一行空行,IE則能正確顯示。 - 換行處理:當一行程式超過網頁右邊界時要如何處理,在後面有簡單說明。
- 是否輸出表頭和表尾:若是要貼到Blog裡,一般是不需要勾選的
- 樣式的輸出方式:標籤樣式可以產生成外部的.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)
Sorry, 很久沒用Google sc…