Is it possible to get syntax highlighting and other editor services for html template literals in Svelte?

Question

I wrote code that looks like:

<script lang="ts">
    ...
        {
            content: `
                <p>
                    Some content
                </p>
            `,
            ...
        },
    ...
</script>

...
{@html item.content}
...

I am using VS code with the Svelte extensions and I would like to get auto-formatting, synax highlighting, and other IDE services in the template literal above. I tried various VS code extensions and code modifications (like adding /* html */ before the literal) but couldn't get a working setup.

Does anyone have a functional setup for this? What do I need to do to make it work?

Update: H.B. referred to an extension that solves the syntax highlighting part . I would still very much like auto-formatting as well :)

Answer 1

es6-string-html can add syntax highlighting via /*html*/, no formatting.

But you really should just not do this, create a separate component instead.

Using @html is also quite dangerous as soon as any unknown or user-provided data is to be used.