Search code examples
htmlcssvisual-studio-codesyntax-highlighting

VS Code gets confused if I put an SMGL comment (<!--hello-->) inside a style element in an HTML document?

When using VS Code to write html, if I add embedded CSS in the style element, the syntax highlighting changes the document to be styled as if the entire document was CSS.

I have tried;

  • Disabling all extensions and reloading VS Code.
  • Removing all extensions entirely and reloading VS Code.
  • Adding an association for html files for .html.

Syntax highlighting without embedded CSS

Syntax highlighting with embedded CSS

Solution

  • This was caused by the HTML comment in the style element. That's legal for older browsers, but see the following quote from the CSS 2.1 spec:

    CSS also allows the SGML comment delimiters ("<!--" and "-->") in certain places defined by the grammar, but they do not delimit CSS comments. They are permitted so that style rules appearing in an HTML source document (in the STYLE element) may be hidden from pre-HTML 3.2 user agents. See the HTML 4 specification ([HTML4]) for more information.

    And in the CSS 3 spec, <!-- and --> basically just do nothing. The text between them will be treated as if they were written without the wrapping <!-- and -->.

    But I have no idea if VS Code's builtin language support for style elements in HTML is following the CSS spec with respect to that, or which spec version it's following.