Ransford Okpoti's Blog

11 July, 2011

How To Create a Gherkin Syntax Highlighter In gedit

Filed under: Uncategorized — Tags: , , , , , — ranskills @ 8:29 am

So, I woke up today and did a little bit of surfing, like I always do, and came across Cucumber, a Behaviour-Driven Development (BDD) framework in Ruby and I bought into the idea as it focuses on the behavioural aspects of the system by allowing you to describe and test the system’s behavior. Well, like a typical PHP junkie, I had to look for alternatives in PHP and luckily my search lead me to Behat, a BDD framework in PHP and inspired by Ruby’s Cucumber. Python’s users of Freshen may also find this informative since it uses the same syntax.

I decided to try out the examples only to realize that Gherkin, the Domain-Specific Language (DSL) used to describe the features to be tested in the features file, had no syntax highlighting in gedit, the official text editor of the GNOME desktop environment.

These are steps required to provide a basic gherkin syntax highlighting.

Steps

  1. Locate the directory where all the language files used for source code highlighting are kept, i.e. the language-specs directory.

      Linux

    1. Type the command below to help us locate the language-specs directory.
    2.  locate gtksourceview | grep 'javascript.lang$' 

      The outcome of the above command is shown below with /usr/share/gtksourceview-2.0/language-specs/ as the directory of interest to us.

      /usr/share/gtksourceview-2.0/language-specs/javascript.lang 

      Windows

      The location is going to be either one of these, provided gedit was installed on drive C:\.

    1. C:\Program Files (x86)\gedit\share\gtksourceview-2.0\language-specs (if on Windows 7)
    2. OR

    3. C:\Program Files\gedit\share\gtksourceview-2.0\language-specs
  2. Create a gherkin.lang file into the language-specs directory with the content below.
  3. <?xml version="1.0" encoding="UTF-8"?>
    <!-- Author: 2011 Ransford Okpoti -->
    <language id="gherkin" _name="Gherkin" version="2.0" _section="Scripts">
          <metadata>
                <property name="mimetypes">text/x-feature</property>
                <property name="globs">*.feature</property>
          </metadata>
          <styles>
                <style id="keyword" 	_name="Keyword"		map-to="def:keyword"/>
                <style id="feature" 	_name="Feature"		map-to="def:type"/>
                <style id="steps_keywords" 	_name="Steps Keywords"	map-to="def:keyword"/>
                <style id="constructors" 	_name="Constructors"	map-to="def:type"/>
                <style id="variables" 	_name="Variables"	map-to="def:comment"/>
                <style id="comments" 	_name="Comments"	map-to="def:comment"/>
          </styles>
          <definitions>
                <context id="gherkin" class="no-spell-check">
                      <include>
                            <!-- Keywords -->
                            <context id="steps_keywords" style-ref="steps_keywords">
                                  <keyword>Given</keyword>
                                  <keyword>When</keyword>
                                  <keyword>Then</keyword>
                                  <keyword>And</keyword>
                                  <keyword>But</keyword>
                            </context>
    
                            <context id="comments" style-ref="comments" end-at-line-end="true">
                                  <start>#</start>
                                  <end>\n</end>
                            </context>
    
                            <context id="feature" style-ref="feature">
                                  <keyword>Feature</keyword>
                            </context>
    
                            <context id="constructors" style-ref="constructors">
                                  <keyword>Scenario</keyword>
                                  <keyword>Scenarios</keyword>
                                  <keyword>Outline</keyword>
                                  <keyword>Background</keyword>
                            </context>
    
                            <context id="variables" style-ref="variables">
                                  <match>(&lt;)(\w+)(&gt;)</match>
                            </context>
    
                            <context id="arguments" end-at-line-end="true">
                                  <start>\|</start>
                                  <end>\n</end>
                                  <include>
                                        <context ref="def:decimal" />
                                        <context ref="def:float" />
                                        <context ref="def:string" />
                                        <context id="table_headings">
                                              <match>\w+</match>
                                        </context>
                                  </include>
                            </context>
                      </include>
                </context>
          </definitions>
    </language>
    
  4. We are done, close gedit, if you have it opened, and open a gherkin source file with the extension .feature to see the beauty of our work.
  5. NOTE: On line 3, the _section attribute was set to Scripts indicating that the Gherkin menu item can be located from the program’s menu navigation: View -> Highlight Mode -> Scripts -> Gherkin.

Below is a gherkin source file with no syntax highlighting in gedit.

Gherkin File With No Syntax Highlighting

After the completion of our little procedure, you can see how beautiful our gherkin source file appears in gedit.

Gherkin File With Syntax Highlighting

NOTE: The above procedure can be followed to create syntax highlighting for any source file.
For a thorough explanation of the structure of the xml file, follow the official guide.

Advertisements

Blog at WordPress.com.