Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Celebration

Earn badges and make progress

You're on your way to the next level! Join the Kudos program to earn points and save your progress.

Deleted user Avatar
Deleted user

Level 1: Seed

25 / 150 points

Next: Root

Avatar

1 badge earned

Collect

Participate in fun challenges

Challenges come and go, but your rewards stay with you. Do more to earn more!

Challenges
Coins

Gift kudos to your peers

What goes around comes around! Share the love by gifting kudos to your peers.

Recognition
Ribbon

Rise up in the ranks

Keep earning points to reach the top of the leaderboard. It resets every quarter so you always have a chance!

Leaderboard

Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,463,406
Community Members
 
Community Events
176
Community Groups

Gherkin Syntax Highlighting

Edited
Andreas Rising Star Feb 22, 2018

Since we started using Cucumber for various projects, we felt the need for a nice representation of Gherkin code within Confluence.

So I created a custom gherkin brush file based on the SyntaxHighlighter manual and added it to the Code Macro:

SyntaxHighlighter.brushes.Custom = function()
  {
    this.regexList = [
      { regex: SyntaxHighlighter.regexLib.singleLinePerlComments,    css: 'comments' },        // #comments
      { regex: /(['\"]{3})([^\1])*?\1/gm,                         css: 'string' },        // multi-line strings like in python with """
      { regex: SyntaxHighlighter.regexLib.doubleQuotedString,        css: 'string' },        // strings
      { regex: SyntaxHighlighter.regexLib.singleQuotedString,        css: 'string' },        // strings
      { regex: /@.*$/gmi,                                            css: 'color1' },        // @tags
      { regex: /^\s*(But |And |Then |When |Given |Scenarios|Examples|Scenario Template|Scenario Outline|Scenario|Background|Feature)/gmi,    css: 'keyword'  } // english
    ];
  };
SyntaxHighlighter.brushes.Custom.aliases  = ['gherkin'];

SyntaxHighlighter.brushes.Custom.prototype = new SyntaxHighlighter.Highlighter();

It currently looks ok but I wonder if someone from the community uses a similar/ better solution for that.

Feel free to use this, btw: gist

1 comment

I found this one to be better can't remember where I found it

/**
* Author: Michael Hall
* URL: http://www.bankofcanada.ca/
* License: GPL-2 | GPL-3
*/
SyntaxHighlighter.brushes.Gherkin = function()
{
/**
* Filters out the delimiters and values out of tables.
* @param match: the contents of the matching text
* @param regexInfo: regular expression info
* @returns: list of SyntaxHighlighter.Match objects
*/
function processTable(match, regexInfo){
return [
new SyntaxHighlighter.Match('|',match.index,'keyword'),
new SyntaxHighlighter.Match(match[0].substr(1),match.index+1,'value')
];
}

var keywords = 'Given When And Then Feature Scenario Outline Template Background But Examples';
this.regexList = [
{ regex: SyntaxHighlighter.regexLib.singleLinePerlComments, css: 'comments' }, // comments using #
{ regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' }, // "string"
{ regex: /"""[^"]*"""/gm, css: 'string' }, // multiline string (""" ..... """)
{ regex: /\b([\d]+(\.[\d]+)?|0x[a-f0-9]+)\b/gi, css: 'value' }, // numbers
{ regex: new RegExp(this.getKeywords(keywords), 'gmi'), css: 'keyword' }, // keywords
{ regex: /@[^@\r\n\t ]+/gi, css: 'preprocessor' }, //annotations
{ regex: /\|.*?(?=\|)/g, func: processTable }, //Tables
{ regex: /\|/g, css: 'keyword' }, //Excess table delimiters
{ regex: /(&lt;|<).*?(&gt;|>)/gi, css: 'value' } //values from tables
];
};
SyntaxHighlighter.brushes.Gherkin.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.Gherkin.aliases = ['gherkin', 'behat'];
Like Nos Him likes this
Andreas Rising Star Aug 22, 2018

You're right @Ben Erridge, this one looks even better. I've updated the gist.

Thank you!

Like # people like this

Hi @Andreas ,

Since you extensively use Cucumber you may want to consider AssertThat BDD & Test Management in Jira plugin which provides end-t-end BDD/cucumber solution. From interactive gherkin editor to test automation frameworks integration and uploading cucumber reports back to Jira. 

More information can be found on the website and wiki.

Regards,

Glib

Like Deleted user likes this
Andreas Rising Star Apr 09, 2019

Thanks for the interesting suggestion, @Glib .

We're running JIRA on premises though and are currently not looking for additional tools in that technology stack.

How to implement this JS in Jira ?

Like # people like this
Andreas Rising Star May 15, 2019

Prism does support Gherkin for JIRA, @Nos Him.

Like # people like this

@Andreas according to their documents it does https://prismjs.com/#languages-list

 

But on applying it with:

{code:gherkin}.. {code}

 

I get 

Unable to find source-code formatter for language: gherkin. Available languages are: actionscript, ada, applescript, bash, c, c#, c++, cpp, css, erlang, go, groovy, haskell, html, java, javascript, js, json, lua, none, nyan, objc, perl, php, python, r, rainbow, ruby, scala, sh, sql, swift, visualbasic, xml, yaml

 

Which is only a fraction of the claimed supported formats.

Sorry - my bad, the Prism plugin was not properly installed. I was just getting regular Jira code macro functionality.

Comment

Log in or Sign up to comment
TAGS

Atlassian Community Events