Orion 5.0: Syntax Styling Revisited

The orion.edit.highlighter service gives plug-ins a way of contributing syntax stylings for arbitrary languages. Prior to Orion 5.0 these stylings were defined as either TextMate grammars or CodeMirror modes. While both of these styling approaches are well-established and have their respective strengths, they each have shortcomings in the context of Orion:

• The TextMate spec expects support for some regular expression functionality that is not supported by Javascript’s RegExp implementation. As a result, Orion claimed styling support for only a subset of TextMate functionality (and consequently a subset of TextMate grammars).
• CodeMirror’s programmatic model proved to be inefficient and error-prone in Orion as a result of Orion’s service methods being run in isolation.

For the Orion 5.0 release a new syntax styling service has been defined (still with id orion.edit.highlighter) which is its official story going forward. The TextMate- and CodeMirror-based styling implementations are considered to be unsupported, though are still in the Orion release to preserve backwards-compatibility.

The new styling service maintains a strong resemblance to TextMate because its declarative approach is well-suited to Orion’s isolation of services. Additionally, TextMate’s grammar syntax has proven to serve its purpose well over time. So anyone with TextMate grammar-writing experience should find writing grammars for Orion to be very familiar.
The new shape of this service is described in orion.edit.highlighter, along with an example that shows Orion’s grammar for styling of .json files. The example highlights how small a functional language grammar can be made by including styling patterns defined in other grammars. Orion provides a generic grammar containing a set of common patterns that other language grammars can inherited as needed.

Inclusion of patterns from other grammars is also useful for handling embedded content. For example, Orion’s HTML-styling grammar includes the following rule to style CSS within <script> tags:

{
    begin: "(?i)(<style)([^>]*)(>)",
    end: "(?i)(</style>)",
    captures: {
        1: {name: "entity.name.tag.html"},
        3: {name: "entity.name.tag.html"}
    },
    contentName: "source.css.embedded.html",
    patterns: [
        {
            include: "orion.css" // <-- this is it
        }
    ]
}

A consequence of (and test cases for) this new styling service implementation is that Orion now provides syntax styling for additional languages. The updated set of supported content types are:

• application/javascript
• application/json
• application/schema+json
• application/x-ejs
• application/xml
• text/css
• text/html
• text/x-java-source
• text/x-php
• text/x-python
• text/x-ruby
• text/x-yaml

Finally, embedders of Orion’s stand-alone editor can also get automatic styling of these content types by providing a contentType value when invoking the editor. For example:

require(["orion/editor/edit"], function(edit) {
    edit({
        contentType: "text/x-ruby"
    });
});