建立 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。

延伸閱讀

• 美化部落格的程式碼 使用SyntaxHighlighter 
• Google Drive當成網頁空間
• SyntaxHighlighter2.0の使い方
• using SyntaxHighlighter with auto loader on google blogger

參考資料

• 幫SyntaxHighlighter-Plus加上新的語言樣版
• SyntaxHighlighter---Developing a custom brush
• 在Blogger中支持代碼高亮Code highlight in Blogger
• 讓SyntaxHighlighter幫你網誌內的程式碼上色
• SyntaxHighlighte設定與調整
• 魚與熊掌如何兼得～縮短SyntaxHighlighter載入時間