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

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

Just FWIW, that isn't a string, it's a template literal. (Untagged template literals result in strings, though. Tagged ones may not.) But I'd expect anything up-to-date that syntax highlights HTML in strings would also handle template literals. — T.J. Crowder
– T.J. Crowder, Commented Feb 13, 2020 at 12:03
For future readers: you can use the plugin es6-string-html to highlight HTML template strings prefixed by a comment: /* html */`<h1>Hello world</h1>`. There are es6-string-* plugins for other languages too, like CSS and Markdown. — ezekg
– ezekg, Commented Apr 20, 2021 at 2:29

vishnu v · Accepted Answer · 2020-02-13 12:26:43Z

11

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>
`;

edited Feb 13, 2020 at 12:26

answered Feb 13, 2020 at 12:14

vishnu v

3234 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Nurdaulet Shamilov Over a year ago

Its actually solution to my problem but there is error that html is not defined

vishnu v Over a year ago

did you import html from lit-html ?

Danny '365CSI' Engelman Over a year ago

With this lit-html plugin installed; you don't need to load lit-html WHEN you define your own html Tagged template: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

lamplightdev Over a year ago

The plugin will also syntax highlight literals that use the built in String.raw e.g. const markup = String.raw`<div><p>Hi</p></div>`;

Javi Villar Over a year ago

If you aren't using Lit library, the solution to work with the "lit-html" extension is what @lamplightdev said, use String.raw.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related