Yesterday, I decide to create a syntax highlighter for the genbiL language. The end-result is available on this GitHub repository. The goal was to provide a better experience for users editing these files from their favorite code editor. It was a completely new experience for me and it appeared to be much easier than expected.
if you’re using genbiL, I recommend that you install it through the following commands:
cd %userprofile%\.vs\Extensions git clone git://github.com/Seddryck/genbil-tmbundle genbil
Visual Studio and Visual Code use an international standard for syntaxes and snippets: TextMate Bundles. If you want to create a new TextMate Bundle for a given language, start by creating a new folder under
%userprofile%/.vs/Extensions with the name of your language and then a subfolder named syntaxes.
In this folder create a new empty file or (much more easier) copy/paste an existing file from another language. The format of this file is a property list, an xml-like file with just a few elements:
<key/>will specify the type of content for the next element
<string/>specify the value associated to the
<array/>is a container to specify multiples values for the
<dict/>let’s you specify a
It sounds weird at the beginning but it’s relatively easy to use.
First action to take is to change or write a few key information:
uuidis a unique identifier for this syntax definition. Each new syntax definition must have its own uuid. Don’t re-use them or your editor will not be able to load your syntax.
nameof your language. Use a short, descriptive name. Typically, you will be using the programming language’s name you are creating the syntax definition for.
- The top level scope for this syntax definition is the
scopeName. It takes the form
fileTypesis a list of file extensions. When opening files of these types, Visual Studio will automatically activate this syntax definition for them.
<key>uuid</key> <string>2BA75B32-707C-11D9-A928-000D93589AF6</string> <key>name</key> <string>GenbiL</string> <key>scopeName</key> <string>source.genbil</string> <key>fileTypes</key> <array> <string>genbil</string> </array>
After this initial definition, you’ll have to create patterns. Each pattern starts by a
match is defined through a regular expression.
Then comes the
name. In fact the name is a naming scope and isn’t obvious sometimes. Check the Textmate online manual for guidance on scope names. It is important to re-use the basic categories outlined there if you want to achieve the highest compatibility with existing themes.
Colors from the theme have hardcoded scope names in them. They could not possibly include every scope name you can think of, so they target the standard ones plus some rarer ones on occasion. This means that two colors using the same syntax definition may render the text differently!
Bear in mind too that you should use the scope name that best suits your needs or preferences. It’d be perfectly fine to assign a scope like
constant.numeric to anything other than a number if you have a good reason to do so.
<key>areas</key> <dict> <key>patterns</key> <array> <dict> <key>match</key> <string>\b(case|template|setting|suite)\b</string> <key>name</key> <string>storage.type.source.genbil</string> </dict> </array> </dict>