HighLight:程式碼顯示的美化工具:簡睿IT隨筆:Xuite日誌
  • 挺不賴地~贊助一下
  • 網頁載入中,請稍候...
  • 文章分類
  • 噗浪/互動式留言板
  • 熱門搜尋書籤
  • 網站搜尋[開新窗]
  • 自訂搜尋
  • 天邊一朵雲
  • jerry@xuite
  • 服務於軟體業的資訊老兵。興趣廣泛,學習力佳,好奇心強。

  • 最愛連結
  • 有朋自遠方來

  • website counter
    台灣部落格列表 PageRank
  • 參觀人氣統計
  • 日曆
  • 我的發燒文
  • 累積 | 今日
    loading......
  • 最新文章
  • 最新回應
  • Re:珍重再見,期待再相會!!!,by(貸款)於2008-11-27
    Re:用Everything在電光石火間找到迷失的檔案,by(Ayr)於2008-11-22
    Re:用svchost viewer檢視始終是個謎的svchost.exe,by(jerry@xuite)於2008-11-22
    Re:用svchost viewer檢視始終是個謎的svchost.exe,by(nio)於2008-11-20
    Re:用svchost viewer檢視始終是個謎的svchost.exe,by(tim lo)於2008-11-20
    Re:ClipPath: 複製路徑的小工具,by(jerry@xuite)於2008-11-19
    Re:ClipPath: 複製路徑的小工具,by(nio)於2008-11-19
    Re:如何轉換AutoHotkey的預設分隔字元:冒號,by(nio)於2008-11-19
    Re:ClipPath: 複製路徑的小工具,by(emisjerry)於2008-11-18
    Re:ClipPath: 複製路徑的小工具,by(nio)於2008-11-17
  • 最新引用
  • Re:[使用svchost viewer檢視你電...],By 科技與資訊研究所 於2008-11-11
    Re:[【部落格更新】 增加中央氣象局衛星雲圖],By ~平淡生活~ 於2008-11-04
    Re:[【部落格更新】 增加中央氣象局衛星雲圖],By ~平淡生活~ 於2008-10-07
    Re:[標籤雲-翻譯自wikipedia],By 4664-1946~1964嬰兒潮、Baby Boomers 於2008-07-22
    Re:[標籤雲-翻譯自wikipedia],By 4664-1946~1964嬰兒潮、Baby Boomers 於2008-07-22
  • 日誌評價
  • 平均分數:0 顆星
    投票人數:0
    我要評分:
  • 日誌使用資源






  • 如何使用RSS
    Powered by Xuite
    2008-10-04 16:22 HighLight:程式碼顯示的美化工具
  • ?
  • Blog工具箱
  • 好文轉寄
  • 平均分數:0 顆星    投票人數:0
    我要評分:
    標籤 : Blog工具   


    在Blog裡顯示程式碼經常都有繁瑣的程序,我使用過dp.SyntaxHighlighterCodePressSyntax 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檔,或內嵌在標籤裡,為求簡單則勾選之以使用內嵌格式

    image

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

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

    image

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

    image

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

    image

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

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

    1. /*
    2. * V1.0.1 2008/09/01
    3. * V1.0.2 2008/09/26 加入plurk指令
    4. * V1.0.3 2008/09/27 改進plurk, 在開頭加入qualifier動詞
    5. * V1.0.4 2008/09/28 改進plurk, qualifier動詞-語系, 如loves-cn, loves-en
    6. */
    7. CmdUtils.CreateCommand({
    8. name: "funp",
    9. author: { name: "emisjerry"},
    10. contributors: ["emisjerry"],
    11. license: "GPL",
    12. description: "選取好描述文字,把本篇文章貼上推推王",
    13. takes: {"輸入標籤名稱": noun_arb_text},
    14. icon: "http://funp.com/favicon.ico",
    15. execute: function(directObject) {
    16. var _sSelection = CmdUtils.getSelection();
    17. //window.alert(_sSelection + ':' + context.focusedWindow.location.href);
    18. var _aTags = directObject.text.split(" "); // 把輸入字串分成陣列
    19. var _sTags = "";
    20. for (var ele in _aTags) {
    21. _sTags += "&tags[]=" + encodeURIComponent(_aTags[ele]);
    22. }
    23. if (_sTags == "") _sTags = "&tags[]=科技"; // 未輸入標籤則預設為科技
    24. else _sTags = _sTags.replace(/tech/, '科技'); // 把tech標籤換成科技, 加快輸入速度
    25. Utils.openUrlInBrowser("http://funp.com/push/submit/?popup&url=" +
    26. encodeURIComponent(context.focusedWindow.location.href) +
    27. "&t="+encodeURIComponent(_sSelection)+_sTags);
    28. }
    29. });
    30.  
    31. CmdUtils.CreateCommand({
    32. name: "dict",
    33. author: { name: "emisjerry"},
    34. contributors: ["emisjerry"],
    35. license: "GPL",
    36. description: "Yahoo!奇摩字典",
    37. takes: {"要翻譯的字彙": noun_arb_text},
    38. icon: "http://tw.dictionary.yahoo.com/favicon.ico",
    39. execute: function(directObject) {
    40. Utils.openUrlInBrowser("http://tw.dictionary.yahoo.com/search?ei=UTF-8&p=" +
    41. directObject.text );
    42. }
    43. });
    44.  
    45. CmdUtils.CreateCommand({
    46. name: "cdic",
    47. author: { name: "emisjerry"},
    48. contributors: ["emisjerry"],
    49. license: "GPL",
    50. description: "教育部國語辭典",
    51. takes: {"要翻譯的字彙": noun_arb_text},
    52. //icon: "http://tw.dictionary.yahoo.com/favicon.ico",
    53. execute: function(directObject) {
    54. Utils.openUrlInBrowser( "http://140.111.34.46/cgi-bin/newDict/dict.sh?idx=dict.idx&pieceLen=50&fld=1&imgFont=1&cond=" +
    55. (directObject.text));
    56. }
    57. });
    58.  
    59. /*
    60. * Original author: http://theunfocused.net/moz/ubiquity/verbs/, Blair McBride
    61. * Copied from http://www.plurk.com/user/fortelin
    62. * sample: plurk loves Plurking test.
    63. */
    64. CmdUtils.CreateCommand({
    65. name: "plurk",
    66. takes: {status: noun_arb_text},
    67.  
    68. homepage: "http://theunfocused.net/moz/ubiquity/verbs/",
    69. author: {name: "Blair McBride", homepage: "http://theunfocused.net/"},
    70. modifier: {name: "Jerry Chien"},
    71. license: "MPL",
    72.  
    73. preview: function(previewBlock, statusText) {
    74. var previewTemplate = "將要發佈的內容如下:
      "
      +
    75. "${status}

      "
      +
    76. " 總字數為: ${chars}";
    77. var truncateTemplate = "
      後面 ${truncate} "
      +
    78. "個字將予以刪除!";
    79. var previewData = {
    80. status: statusText.text,
    81. chars: statusText.text.length
    82. };
    83.  
    84. var previewHTML = CmdUtils.renderTemplate(previewTemplate,
    85. previewData);
    86.  
    87. if(previewData.chars > 140) {
    88. var truncateData = {
    89. truncate: previewData.chars - 140
    90. };
    91.  
    92. previewHTML += CmdUtils.renderTemplate(truncateTemplate,
    93. truncateData);
    94. }
    95.  
    96. previewBlock.innerHTML = previewHTML;
    97. },
    98.  
    99. execute: function(statusText) {
    100. if(statusText.text.length < 1) {
    101. displayMessage("Plurk 內容不可空白");
    102. return;
    103. }
    104. var _sQualifier = "says";
    105. var _sLang = "tr_ch"; // 預設為繁體中文
    106. var _sText = statusText.text;
    107. var _iIndex = _sText.indexOf(" ");
    108. var found = false;
    109. if (_iIndex > 0) {
    110. var _aQualifiers = ["loves","likes","shares","gives","hates","wants",
    111. "wishes","has","will","wonders","asks","was","feels","thinks","says","is"];
    112. var _sVerb = _sText.substring(0, _iIndex); // 要使用的qualifier
    113. var _iIndex2 = _sVerb.indexOf("-"); // loves, loves-tw, loves-cn, loves-en, 減號後面加語系
    114. if (_iIndex2 > 0) {
    115. var _sVerbLang = _sVerb.substring(_iIndex2+1).toLowerCase();
    116. if (_sVerbLang=="tw") _sLang = "tr_ch";
    117. else _sLang = _sVerbLang;
    118.  
    119. _sVerb = _sVerb.substring(0, _iIndex2); // loves-cn ==> loves
    120. }
    121. for (var ele in _aQualifiers) {
    122. if (_sVerb==_aQualifiers[ele]) {
    123. found = true;
    124. _sQualifier = _sVerb;
    125. _sText = _sText.substring(_iIndex+1);
    126. break;
    127. }
    128. }
    129. }
    130.  
    131. var updateUrl = "http://www.plurk.com/TimeLine/addPlurk";
    132. var updateParams = {
    133. uid: 3170067,
    134. qualifier:_sQualifier,
    135. lang:_sLang, // en
    136. content: _sText
    137. };
    138.  
    139. jQuery.ajax({
    140. type: "POST",
    141. url: updateUrl,
    142. data: updateParams,
    143. dataType: "json",
    144. error: function() {
    145. displayMessage("Plurk 發佈錯誤");
    146. },
    147. success: function() {
    148. displayMessage("Plurk 發佈成功");
    149. }
    150. });
    151. }
    152. });


    ##

     



    jerry@xuite / Xuite日誌 / 回應(0) / 引用(0) / 好文轉寄
  • 回應