How to syntax-highlight HTML inside JavaScript strings in VS code?

Question

Is there any Vs Code extension to syntax-highlight HTML inside JavaScript strings?

Specifically I am writing web components

const html = content => `
  <div>
    <table>
      ${content}
    </table>
  </div>
`;

class BaseTable extends HTMLElement {
  constructor() {
    super();
  }

  set content(value) {
    const template = document.createElement('template');
    template.innerHTML = style + html(value);

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

I want string inside html constant variable to be highlighted

Answer 1

If you use lit-html, There's a plugin in vs code called lit-plugin for syntax highlighting. Syntax is,

const markup = content => html`
  <div>
    <table>
      ${content}
    </table>
  </div>
`;