Published at
Updated at
Reading time
2min

Here's Remy sharing how to enable template string syntax highlighting via JavaScript comments.

The problem of unhighlighted template strings never really bugged me. I write many of this blog's interactive components without proper syntax highlighting, because I've built myself a custom mini Astro framework. And of course, like many homegrown solutions, it lacks a good developer experience. Missing syntax highlighting was never an issue, though, and things are fine.

However, now that I've read Remy's post, why not make things a little nicer to look at?

A template string without syntax highlighting applied to a `styles` variable

Remy describes that when using the right JS comments, Prettier and the VS Code formatter will work together to format and syntax-highlight the template string content.

Unfortunately, that didn't work in VS Code and I had to install two additional VS Code extensions:

But now I can use /* CSS */ to get some template string CSS highlighting.

Template string with syntax highlighting assigned to a `styles` variable

And if I use HTML in template strings, it'll be highlighted and even formatted via Prettier.

Custom Element definition with a syntax-highlighted template string containing HTML content.

That's very nice! Thank you Remy for the push!

If you enjoyed this article...

Join 6.1k readers and learn something new every week with Web Weekly.

Web Weekly — Your friendly Web Dev newsletter
Reply to this post and share your thoughts via good old email.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles