Gherkin syntax highlighting

[arturdryomov]

I’m using Hugo 0.52 and seems like Chroma does not highlight gherkin language. It would be nice to have it!

Sample (GitHub highlights it properly):

Feature: Guess the word

  # The first example has two steps
  Scenario: Maker starts a game
    When the Maker starts a game
    Then the Maker waits for a Breaker to join

  # The second example has three steps
  Scenario: Breaker joins a game
    Given the Maker has started a game with the word "silky"
    When the Breaker joins the Maker's game
    Then the Breaker must guess a word with 5 characters

[Jos512]

I found a Pygments lexer for Gherkin here. Here is the language reference for Gherkin. Highlight.js also has a lexer for Gherkin. Note for anyone implementing this, Gherko is a localised syntax (at this time each keyword has 69 translations).

[arturdryomov]

Gherkin is a localised syntax

Welp. I would suggest to use English only if the localization is painful but yeah, can be tricky.

[alecthomas]

I gave it a quick try, but that lexer looks like it is in Python2, which pygments2lexer doesn't support.

[micbar]

@alecthomas @arturdryomov See #354

I managed to run pygments2lexer but I needed some adjustments.

I used this as a reference

@foo34 @bar # some comment
Feature: proof of concept

  In order to read Cucumber features faster and eaiser on Github 
  As a Cucumber user
  I want to have syntax highlighting for Gherkin
  This is part of the narrative, even if I have the # symbol, it is still the narrative- not a comment

  Background: this is multi-line description
    do you like it?
    Given cheese is good

  Scenario Outline: this is a test 
                    this the second line of the desctiption
    Given I have a <var1> and some "string"
    And the following table and some 'string'
      | header 1  | header 2  | # here is a comment after a step table header
      | cell 1-1  | cell 1-2  | # here is a comment after a step table row
      | cell 2-1  | "cell 2-2" |

    When I do <var2>
    And use apostrophes then the feature's syntax still looks good
    And here is a string with single and double quotes- "i'll be back" 
    And here is a string with the opposite 'the quote is "Foo"'
    And what about a var in a quote like so: "<var2>"
    And what about a multiline string with a var in it like so:
    """
    Hello!
    I am a multiple line string, often called a pystring.
    I can have regular "double quotes" without a problem...
    I can also sub in vars as well like: <var1> and <var2>
    """

    Then I should see something...
    But not something else...

  Examples:
    | var1  |  var2  | # i am a comment
    | foo   |  bar   | # so am i
    | dog   |  food  |

  Scenarios: some other examples with a description
             and guess waht?!? I can have multilines as well!  # look at me, I'm a comment
             Who would have thunk?
    | var1  |  var2  |
    | foo   |  bar   |
    | dog   |  food  |

  @some_tag @another_tag
  Scenario: more examples
            will follow after this multi-line description
    Given some context# this is an inline comment
    # This is a comment
# So is this with no space at front...

Funktionalität: Addition
  Um dumme Fehler zu vermeiden
  möchte ich als Matheidiot
  die Summe zweier Zahlen gesagt bekommen

  Szenariogrundriss: Zwei Zahlen hinzufügen
    Gegeben sei ich habe <Eingabe_1> in den Taschenrechner eingegeben
    Und ich habe <Eingabe_2> in den Taschenrechner eingegeben
    Wenn ich <Knopf> drücke
    Dann sollte das Ergebniss auf dem Bildschirm <Ausgabe> sein

  Beispiele:
    | Eingabe_1 | Eingabe_2 | Knopf | Ausgabe |
    | 20        | 30        | add   | 50      |
    | 2         | 5         | add   | 7       |
    | 0         | 40        | add   | 40      |

Feature: Addition
  In order to avoid silly mistakes
  As a math idiot 
  I want to be told the sum of two numbers

  Scenario Outline: Add two numbers
    Given I have entered <input_1> into the calculator
    * I have entered <input_2> into the calculator
    When I press <button>
    Then the result should be <output> on the screen

  Examples:
    | input_1 | input_2 | button | output |
    | 20      | 30      | add    | 50     |
    | 2       | 5       | add    | 7      |
    | 0       | 40      | add    | 40     |

[micbar]

Seems like github cannot parse the example 😄

[micbar]

@pmaier1 @Jos512 PR is merged.

@alecthomas when do you plan a new tag?

We would be happy using it in hugo.

[micbar]

Closed by https://github.com/alecthomas/chroma/releases/tag/v0.7.3