iInfo 資訊交流: 建立 SyntaxHighlighter 沒支援的程式語言樣板

最新消息

[公告2014/05/30] 如有需要將部落格中,任何一篇文章的程式碼使用在商業用途,請與我聯繫。

[公告2015/04/26] Line版的 iInfo程式與投資應用 群組已上線想加入的朋友們,請先查看 "入群須知" 再與我聯繫 Line : aminwhite5168,加入請告知身分與回答 "入群須知" 的問題。

[公告2017/02/20] 近來有網友詢問 MultiCharts 與 Excel 畫冰火能量圖 (8)MultiCharts 與Excel 畫冰火能量圖(11) --- 更名「台股儀表板」 文章中教學檔案取得方式,有興趣的朋友可透過 Line了解詳情 (請勿以為是免費分享),Line : aminwhite5168。

[公告2018/04/22] 台北 Python + Excel VBA 金融資訊爬蟲課程,課程如網頁內容 金融資訊爬蟲班:台北班 Python 金融資訊爬蟲、EXCEL VBA 金融資訊爬蟲,請盡快把握機會,歡迎券商、大專院校邀約講座。

[公告2018/06/01] 台指能量儀表板教學課程,課程如網頁內容 台北班:台指能量儀表板

2015年12月4日 星期五

建立 SyntaxHighlighter 沒支援的程式語言樣板

在前面的文章裡 美化部落格的程式碼 使用SyntaxHighlighter 介紹過SyntaxHighlighter如何安裝於網頁或部落格上,用以美化網頁中的程式碼,但有時需要美化的程式語言是沒有在SyntaxHighlighter列表支援的話該怎麼辦呢?這裡將教你如何新增 SyntaxHighlighter原本沒支援的程式語言樣板。

以下就以MultiCharts來作範例,提供兩種寫法,檔名均存為shBrushMultiCharts.js。
寫法一
/**
 * DEC-05-2015
 * Copyright (C) 20015 iInfo.
 * Author  : Amin.
 * URL     : http://white5168.blogspot.tw/ 
 * version : 1.00
 */
SyntaxHighlighter.brushes.MC = function()
{
 // Copyright 2015 Amin
 var keywords  = ' over at stop input ';     
 var functions = ' legacycolortorgb rgbtolegacycolor rgb getrvalue getgvalue getbvalue ' +
                 ' gradientcolor NumToStr Average iff ';

 this.regexList = [
  { regex: SyntaxHighlighter.regexLib.singleLineCComments, css: 'comments' },   // one line comments
  { regex: SyntaxHighlighter.regexLib.multiLineCComments,  css: 'comments' },   // multiline comments 
  { regex: SyntaxHighlighter.regexLib.doubleQuotedString,  css: 'string' },     // strings
  { regex: SyntaxHighlighter.regexLib.singleQuotedString,  css: 'string' },     // strings
  { regex: new RegExp(this.getKeywords(functions), 'gm'),  css: 'functions' },
  { regex: new RegExp(this.getKeywords(keywords), 'gm'),   css: 'keyword' }
  ];
};
SyntaxHighlighter.brushes.MC.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.MC.aliases = ['mc','mtc']; 
程式碼說明:
1. 11、12行的keywords(關鍵字)、functions(函數),請自行參照MultiCharts的內容輸入。
2. 08、24、25行大寫 "MC" 的部分,可自行修改為自己所需要的程式語言名稱。
3. 25行中括弧裡須填入自己指定的程式語言名稱,也可再填入其他指定的別名,但一定要全部小寫。

寫法二
/**
 * DEC-05-2015
 * Copyright (C) 20015 iInfo.
 * Author  : Amin.
 * URL     : http://white5168.blogspot.tw/ 
 * version : 1.00
 */
;(function()
{
  // CommonJS
  typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;

  function Brush()
  {
    var keywords =  ' over at stop input ';
    var functions = ' legacycolortorgb rgbtolegacycolor rgb getrvalue getgvalue getbvalue ' +
                    ' gradientcolor NumToStr Average iff ';

    this.regexList = [
    { regex: SyntaxHighlighter.regexLib.singleLineCComments, css: 'comments' },   // one line comments
    { regex: SyntaxHighlighter.regexLib.multiLineCComments,  css: 'comments' },   // multiline comments
    { regex: SyntaxHighlighter.regexLib.doubleQuotedString,  css: 'string' },     // strings
    { regex: SyntaxHighlighter.regexLib.singleQuotedString,  css: 'string' },     // strings
    { regex: new RegExp(this.getKeywords(functions), 'gm'),  css: 'functions' },
    { regex: new RegExp(this.getKeywords(keywords), 'gm'),   css: 'keyword' }
    ];
  };

  Brush.prototype = new SyntaxHighlighter.Highlighter();
  Brush.aliases   = ['mc','mtc'];
  SyntaxHighlighter.brushes.MC = Brush;
  // CommonJS
  typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
})();
程式碼說明:
1. 15、16行的keywords(關鍵字)、functions(函數),請自行參照MultiCharts的內容輸入。
2. 30行中括弧裡須填入自己指定的程式語言名稱,也可再填入其他指定的別名,但一定要全
3. 31行大寫 "MC" 的部分,可自行修改為自己所需要的程式語言名稱。

執行結果
if marketposition = 0 and close > 8888 then buy("B") next bar at market;
關於程式碼的顏色修改請自行參考CSS語法,修改shThemeDefault.css。

延伸閱讀
參考資料