Friday, May 27, 2011

Syntax Highlighting For Cucumber with Custom Brush

When I tried reading my first post Cuke it Right - Brevity vs Clarity of Cucumber Features in a browser, I got bored soon by the monotony of text styling and the fact that cucumber feature steps does not distinguish themselves from the rest of the contents. Thankfully I found Alex Gorbatchev's Syntax Highlighter.

After a bit of searching in the internet I could not find a good brush for Cucumber Features and I started putting together one and ended up with the following cuke brush. If you like the brush and is familiar with adding a brush to Syntax Highlighter, stop reading now and copy the following brush code. If you like the brush and not familiar with how to use it keep reading.



If you would like to host the Syntax Highlighter on your own you can download it here and follow the installation manual. If you would like to use a hosted version, like I did this for this blog, you can find the details in this blog.

OK, its all good till now and I am able to use the built in brushes. How do I use this Cucumber Brush?

Using your own hosted version:

1. Unzip the Syntax Highlighter zip file
2. Create a file <Syntax Highlighter>/scripts/shBrushCuke.js
3. Copy the brush code to shBrushCuke.js file. Done! But if you like some testing continue
4. Open <Syntax Highlighter>/tests/brushes_tests.html
5. Add the following lines between <head> and </head> tags

6. Look for the following section of code and add 'Cuke' to the list
7. The brushes_tests.html expects a 'cuke.html' file under the brushes directory. So create one.
8. And put your Cucumber feature between the script tags




Using Free Hosted Version:
1. Include the scripts and css files as described in this blog
2. Copy and paste the brush code between lt;head> and </head> tags


If everything is alright, you should see the feature syntax highlighted like below




For more examples and usages you can look at my updated first post Cuke it Right - Brevity vs Clarity of Cucumber Features.

Comments, Suggestions or Improvements?

1 comment:

  1. Chrome doesn't like array comprehensions, so updated using for loop

    ReplyDelete