Coloring Language Aspects

February 20, 2010

I was looking for a way to illustrate the integration of different language aspects in WebDSL. After tedious experimentation with graphical editors to highlight the parts of a program, it dawned on me that the syntax coloring configuration of the Spoofax editor for WebDSL is the perfect tool for the job. Spoofax provides DSL for syntactic editor services, such as syntax coloring. The Spoofax generator, generates default configurations for the various services. For instance, for syntax coloring the following settings (left) are generated. To illustrate the role of data models, user interface templates, and expressions/actions I added the following customization of the default (right):

<img src="http://blog.eelcovisser.net/uploads/default-spoofax-colors.png" border=0 align=center> <img src="http://blog.eelcovisser.net/uploads/spoofax-coloring.png" border=0 align=center>

The result can be seen in the following fragments consisting of an entity declaration (data model) and a page definition with form and action:

<img src="http://blog.eelcovisser.net/uploads/page-data-model.png" border=0 align=center> <img src="http://blog.eelcovisser.net/uploads/edit-page.png" border=0 align=center>

I find it hard to choose good colors (e.g. yellow provides bad contrast on white), but this example nicely show how Spoofax allows assigning colors to syntactic categories, not just tokens.