SyntaxHighlighter.js brush for Cucumber/Gherkin

Mar 25, 2011   //   by Jaco Swarts   //   Develop  //  No Comments  // 

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(&quot;|&quot;) &gt;= 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).

Leave a comment

close

Login

Switch to our mobile site