Highlighting HTML inside a JavaScript template tag

Hey there,

Is there any sort of extension like Lit-HTML in the collection? I can’t seem to find one. If not, can I commission one? :grin:

Why

When doing straight-up Web Components, or doing tough projects where, say, a framework is being mixed with raw HTML/JS (and I’m sure a few other use cases I don’t know about), the standard way of laying down the HTML skeleton before connecting to it with JavaScript is something like:

myComponent.innerHTML = html `
<div class=thing>
    Some things.
</div>`

So that’s a template tag followed by zero or one space, then whatever’s inside the template literal (inside the tildes) is HTML. It’d be nice to see it highlighted as such!

I’m not sure if this is something that’d have to be added to the existing built-in JavaScript syntax, or something that can ride along with whatever syntax you’ve already selected…

Anyways, thanks for reading.

2 Likes

Hi,

I sent a feature request a while back about something like this.

“Any idea if html, css syntax highlighting with auto completion will ever be supported in javascript template literals strings? Webstorm from jetbrains supports it out the box with no special tagging. Would be nice. Haven’t seen any other editor with this feature”

Response:

" We believe this should be supported in Nova 10 or newer. If highlighting for other languages in JS template literals doesn’t seem to be working for you, a screenshot or example file demonstrating the issue would be appreciated!"

Replied:

“Seems to not have that feature for me. Screenshot below next to webstorm.”

Never got a response back!

I might just have to stick to webstorm. Been looking for an IDE or Code Editor for multiple languages. JetBrains IDE are all split apps for single languages and are memory hoggers.

JavaScript literals containing HTML or CSS need to be prefixed with the language identifier, similar to how Markdown code fences work:

let templateTag = html`
    <html><head></head><body></body></html>
`;

Yeah I was able to figure that out but its just not a clean way. VS code also has an extension for that. It would be nice to mimic what Webstorm does. No need to prefix or anything. Also in Webstorm you get code hinting for html and css

Noted! We will consider this a feature request, then.