Thursday, April 02, 2009

Syntax Highlighting for Sahi Code

I have added syntax highlighting to my blogs now. Used Alex Gorbatchev's SyntaxHighlighter 2.0 which is awesome. I added a Sahi brush to SyntaxHighlighter so that keywords in Sahi would also be highlighted.

This is what shBrushSahi.js looks like:

SyntaxHighlighter.brushes.SahiScript = function()
{
var keywords = 'abstract boolean break byte case catch char class const continue debugger ' +
'default delete do double else enum export extends false final finally float ' +
'for function goto if implements import in instanceof int interface long native ' +
'new null package private protected public return short static super switch ' +
'synchronized this throw throws transient true try typeof var void volatile while with';

var schedulerFns = '_alert _assertEqual _assertNotEqual _assertNotNull _assertNull _assertTrue _assert _assertNotTrue _assertFalse _assertExists _assertNotExists _callServer _click _clickLinkByAccessor _dragDrop _resetSavedRandom _setSelected _setValue _simulateEvent _call _eval _setGlobal _wait _popup _highlight _log _navigateTo _callServer _doubleClick _rightClick _addMock _removeMock _expectConfirm _setFile _expectPrompt _debug _debugToErr _debugToFile _mouseOver _keyPress _focus _keyDown _keyUp _mockImage _execute _assertContainsText _enableKeepAlive _disableKeepAlive _dragDropXY _deleteCookie _createCookie _clearPrintCalled _saveDownloadedAs _clearLastDownloadedFileName _rteWrite';

var browserFns = '_accessor _button _check _checkbox _image _imageSubmitButton _link _password _radio _select _submit _textarea _textbox _event _getGlobal _random _savedRandom _cell _table _containsText _containsHTML _byId _row _getText _getCellText _div _span _spandiv _option _lastConfirm _reset _file _lastPrompt _lastAlert _get _style _byText _cookie _position _print _printCalled _label _lastDownloadedFileName _rteHTML _rteText _re _prompt _getCellText _getSelectedText _scriptName _isVisible _listItem _parentNode _parentCell _parentRow _parentTable _in';

var otherFns = '_getDB _readFile _logException _logExceptionAsFailure _stopOnError _continueOnError _include';

schedulerFns += (' ' + otherFns);


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' }, // double quoted strings
{ regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' }, // single quoted strings
{ regex: /\s*#.*/gm, css: 'preprocessor' }, // preprocessor tags like #region and #endregion
{ regex: new RegExp(this.getKeywords(schedulerFns), 'gm'), css: 'color4' }, // operators and such
{ regex: new RegExp(this.getKeywords(browserFns), 'gm'), css: 'color5' }, // operators and such
{ regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' } // keywords
];

this.forHtmlScript(SyntaxHighlighter.regexLib.scriptScriptTags);
};

SyntaxHighlighter.brushes.SahiScript.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.SahiScript.aliases = ['sahi', 'sahiscript'];


And this is what I added to my blogger template:


<script src='http://sahi.co.in/static/syntaxhighlighter/scripts/shCore.js' type='text/javascript'/>
<script src='http://sahi.co.in/static/syntaxhighlighter/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://sahi.co.in/static/syntaxhighlighter/scripts/shBrushSahi.js' type='text/javascript'/>
<link href='http://sahi.co.in/static/syntaxhighlighter/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://sahi.co.in/static/syntaxhighlighter/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<style>
.syntaxhighlighter .color4, .syntaxhighlighter .color4 a{color: #000A7F !important;}
.syntaxhighlighter .color5,.syntaxhighlighter .color5 a{color: brown !important;}
</style>
<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = 'http://sahi.co.in/static/syntaxhighlighter/scripts/clipboard.swf';
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>


Note that, in blogger, <br> tags will be visible in the code in place of new lines if you do not add
SyntaxHighlighter.config.bloggerMode = true;


So now Sahi scripts on the blog will look like this:


function search(){
_setValue(_textbox("q"), "sahi");
_click(_submit("Google Search"));
_assertExists(_link("Sahi"));
}
function goToForums(){
_click(_link("Sahi"));
_click(_link("Forums"));
}
function logout(){
if (_condition(_link("Logout"))){
_click(_link("Logout"));
}
}
function login($username, $password){
_click(_link("Login"));
_setValue(_textbox("req_username"), $username);
_setValue(_password("req_password"), $password);
_click(_submit("Login"));
_assertExists(_listItem("Logged in as "+$username));
}

search();
goToForums();
logout();
login("sahitest" "khuljasimsim");