nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Gherkin Syntax Highlighting

Andreas_obxgjv

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

Accepted answers

All comments

Ben Erridge_saat07

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: /@[^@\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'];

Andreas_obxgjv

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

Thank you!

Glib

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

Andreas_obxgjv

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.

Nos Him

How to implement this JS in Jira ?

Andreas_obxgjv

Prism does support Gherkin for JIRA, @Nos Him.

adam-pike

@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.

adam-pike

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

Benjamin Jurg

Found the following ticket: https://jira.atlassian.com/browse/CONFCLOUD-69840

Aside from this cool workaround let's all also vote for getting the feature into the standard code macro.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

cucumber

syntax-highlighting

code-macro