Syntax Highlighting

Solo | Tree-sitter | vsc extention | JS | Internship

Time: 29 august 2024 - 31 januari 2025

introduction

During my internship at the Maritime Research Institute Netherlands (MARIN), I was assigned the task of implementing syntax highlighting for the Extensible Modeling Framework (XMF).

To achieve this, I used Tree-sitter, a parser generation tool developed by GitHub. With Tree-sitter, I created a Visual Studio Code extension to enhance the readability of XMF code.

The Project was divided into 2 parts. Making the parser(tree-sitter) and making the Extention so you will see colours.

Tree-sitter

The Tree-sitter implementation was written in JavaScript, which includes a domain-specific language (DSL) for defining dynamic tokens.

Above, you can see an example output where the parser processed source code and detected an error—indicating a missing semicolon.

If you want to learn more about this, I highly recommend reading the Tree-sitter documentation yourself.

VSC extention

For the extension part, I needed to use the Tree-sitter parser to analyze the source code being edited in Visual Studio Code.

This was possible because I packaged tree-sitter-xmf as a Node.js module, allowing me to use it in a separate project.

Once the code was parsed, I built a system to assign the correct semantic tokens to each parsed token. I accomplished this by using VS Code's Semantic Tokens Provider.

Result

Despite all the work I put in, the project is not fully finished. However, MARIN was pleased with how far I had come. I provided them with a solid foundation to build upon, and they even invited me to return for my next internship if I needed one.

Page updated

Google Sites

Report abuse