Dynamic syntax highlighting

Dynamic syntax highlighting is highlighting of code that the user can change. There is only one place where this happens, and that is the online editor.

Note

Code snippets, iterations, and the like are static as the user can't change their code on the fly. If you'd like to know more of how we handle static syntax highlighting, check the static syntax highlighting docs.

Implementation

Dynamic syntax highlighting is done using the CodeMirror library.

When adding support for your language, there are three options:

  1. The language is supported out of the box by CodeMirror (i.e. listed as a supported language). If so, continue to the Enable language section.
  2. The language is supported via an existing CodeMirror plugin. If so, continue to the Using an existing plugin section.
  3. The language is not supported. There are now three options:
    1. Write a CodeMirror plugin from scratch, as described in the Create a new plugin section.
    2. Your language's syntax (closely) resembles another language's syntax (e.g. Unison's syntax resembles Haskell), in which case you could consider using the syntax highlighting of that language for your language. See the Enable language section for more information.
    3. Don't have dynamic syntax highlighting.

Enable language

To enable CodeMirror support for your language, start a topic on the forum. We (Exercism) will then create a Pull Request that enables CodeMirror support for your language on the website.

Using an existing plugin

To use an existing plugin, it needs to be published on NPM.

If the plugin isn't published on NPM, you can either:

  1. Ask the plugin author if they want to publish on NPM.
  2. Fork the repository and publish it yourself.
  3. Have us (Exercism) fork the repository and we publish it. To do so, open a topic on the forum requesting this.
Note

The CodeMirror website has a list of community-built language plugins.

The next step is to Enable language.

Create a new plugin

If you'd like to create plugin, you have two options for hosting:

  1. Create a repository on your personal account and publish it yourself.
  2. Have us (Exercism) create a repository and let us publish it. To do so, open a topic on the forum requesting this.
Note

You could consider forking the codemirror/lang-example repository which implements CodeMirror support for a simple language.

Once you have a repo, follow the language package instructions to implement the plugin.

You'll then need to publish the plugin on NPM. The next step is to Enable the language.

Use a different language

Your language's syntax (closely) resembles another language's syntax, in which case you could consider using the syntax highlighting of that language for your language. To do so, configure the track using the other language's CodeMirror plugin. See the Enable language section for more information.