SyntaxHighlighter.js brush for Cucumber/Gherkin
Introduction
I required a new brush for Syntax Highlighter in order to highlight the keywords etc when I post Features or Scenarios, so I had a look at a sample by Antono Vasiljev and the developing a custom brush post by the author of SyntaxHighlighter, Alex Gorbatchev.
The Result
//
// Created by Jaco Swarts
// http://productive.me/
//
SyntaxHighlighter.brushes.cucumber = function()
{
var keywords = 'Background Scenario Examples Outline Feature Given When Then And But';
function brushTable(match, regexInfo)
{
var css = (match<a href="http://alexgorbatchev.com/SyntaxHighlighter/">1</a>.indexOf("|") >= 0) ? 'color3' : 'bold' ;
return [new SyntaxHighlighter.Match(match<a href="http://antono.info/eng/2010/04/21/cucumber-for-syntax-hightlighter">2</a>, match.index + match<a href="http://alexgorbatchev.com/SyntaxHighlighter/">1</a>.length, css)];
}
this.regexList = [
{ regex: SyntaxHighlighter.regexLib.singleLinePerlComments, css: 'comments' },
{ regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' },
{ regex: /@\w+/gm, css: 'preprocessor italic' },
{ regex: /([^\s][\s]<em>\n)(\s</em>(\|[^\|\n]+)+)/gm, func: brushTable },
{ regex: /^[\s]<em>In order to /igm, css: 'keyword' },
{ regex: /^[\s]</em>As a /igm, css: 'keyword' },
{ regex: /^[\s]*I want (to )?/igm, css: 'keyword' }
];
};
SyntaxHighlighter.brushes.cucumber.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.cucumber.aliases = ['cucumber', 'gherkin'];
For a demo see Building a service driven mobile app (Part 1).




