Packages: [TypeScript/JavaScript] HTML rendering inside template literals

[benfrain]

It's a common use-case in JavaScript to use template literals to write HTML markup language that is subsequently copied into the DOM. Many JS based templating languages use template literals in this way. A typical example being the lit-html project: https://lit-html.polymer-project.org/guide/writing-templates

At present Sublime renders anything inside backticks as a single colour apart from string interpolation. It would be great it markup/HTML was rendered as markup when inside template literals.

• Sublime Version: 4086+
• OS Version: All

const usingLiterals = () =>
    html`
        <div @click=${clickHandler} class="ob-OnBoarding">
            Click here for sausages!
        </div>
`;

[rchl]

Not all template literals contain HTML. In your example, it's a tagged template literal (prefixed with html) so it probably would be possible to create a syntax override that would handle that based on the prefix.

It would still be just a heuristic and not a guarantee that a template literal tagged with html contains HTML code though since html tag is just a custom function that doesn't guarantee anything.

[wbond]

One area of concern over the example is @click=${clickHandler}. That isn't strictly HTML. In an ideal world. It would probably make more sense for an extension of the JavaScript syntax (and consequently HTML) to be written by a third-party package that provides proper highlighting for Lit-Html.

It would still be just a heuristic and not a guarantee that a template literal tagged with html contains HTML code though since html tag is just a custom function that doesn't guarantee anything.

This is probably a strong enough heuristic, like how we treat raw strings in Python as regex. It is a common convention in the Python world to use raw strings for regex, so we use that as a heuristic.

[benfrain]

Yes, there is this actually: https://github.com/JeremyBernier/LitElement-Syntax-Highlighting

Author says he's moved to VSCode due to some bug but I'll take a look

[wbond]

Almost certainly it would be easier to maintain and more correct to use inheritance with the current versions of the HTML and JavaScript syntaxes. These new features will make derivative syntaxes much easier to deal with.

[predragnikolic]

You can use JSCustom tags https://github.com/Thom1729/Sublime-JS-Custom#tags-object for your usecase and assign lit-html syntax to the html template tag.

[Thom1729]

I second the recommendation of JS Custom. The custom_templates.tags feature is designed precisely for this:

{
    "configurations": {
        "My Config": {
            "custom_templates": {
                "tags": {
                    "html": "scope:text.html.plain"
                }
            }
        }
    }
}

As wbond notes, your example appears to be using a templating extension on top of plain HTML. If you have a syntax for that extension, you could specify it in the configuration instead.

[benfrain]

Sorry for the delay.

Thanks all, JS Custom has provided a very simple and elegant solution. Which in turn solves https://github.com/sublimehq/sublime_text/issues/3675 too 👍