How to Syntax Highlight 11ty HTML/JS templates

Publicado em 26/12/2021

In this tutorial, we'll see how to get syntax highlighting in VSCode when editing 11ty JavaScript templates. It is a very simple process, but, unfortunately, it is not mentioned in the official docs. Let’s do this.

The first step is installing the lit-html extension. It provides syntax highlighting for the namesake templating language.

Then, you just have to prefix your HTML template literals with String.raw, and the extension will syntax highlight them for you.