Flow Playground

Syntax Highlighting Cadence

There are currently several options to highlight Cadence code. Currently those options are integrated into the projects they are used in, but they could be extracted and made generally useable (please let us know e.g. by creating a feature request issue).

HTML output

If highlighted Cadence code is needed as HTML output, then a highlighter based on a TextMate grammar for Cadence can be used.

This option is currently used by the Flow documentation: Code fences with Cadence code in the Markdown documents are converted to HTML using a plugin. Part of the plugin is a highlighter class which was written to be fairly self-standing, takes Cadence code as input, and returns hast, which is then further converted to HTML using the hast-util-to-html package.


Cadence code can also be highlighted in an editor like Monaco (which is the editor library used in Visual Studio Code), potentially in a read-only mode.

This option is currently used in the Flow Playground.

The Monaco editor does not support TextMate grammars and has its own grammar format Monarch, so a separate Monarch grammar for Cadence exists.