Differences between VSCode and SublimeText 4 HTML+JavaScript syntax highlighting

Question

Can someone explain to me why Sublime Text 4 highlights this HTML differently than VSCode?

<html>
    <body>
        <script>
            if (true) { 
        </script>
        
        <script>
            }
        </script>
    </body>
</html>

Both have HTML as the selected syntax. I'm also using the same textmate color-scheme in both.

Sublime Text 4

(inspected with the Scope Hunter package)

VSCode

(inspected with Developer tools in VSCode)

UPDATE

I am working with a server-side JavaScript platform where breaking the blocks up like this is a thing like PHP.

UPDATE 2

I am working on a syntax highlighter, but not for server-side JS.

@Andy I think I'm missing something implied in your comments. Maybe you could give a nod to the community and chime in with an answer? — Adam Spriggs, Jul 20 '21 at 00:01

score 2 · Answer 1 · answered Jul 19 '21 at 14:46

2

The real question is, why should they properly highlight it in the first place? You can't split up <script> blocks. You can do something similar in PHP, though, but your question is about JavaScript.

You can create a simple test.html document with your HTML and open it in a browser. Opening developer tools (e.g. in Chrome) will show errors about "unfinished scripts" and such.

answered Jul 19 '21 at 14:46

Kelvin Schoofs

8,323
1
12
31

I'm working with a server-side JS platform, so it does behave like PHP in that way. – Adam Spriggs Jul 19 '21 at 14:49
@AdamSpriggs — Are you using syntax highlighters designed for *that* server-side JS platform? Or syntax highlighters designed for HTML with embedded client-side JS? – Quentin Jul 19 '21 at 14:51
@AdamSpriggs then the server-side JS should be in some sort of template tag, like `` for PHP for `<% ... %>` for any number of templating languages. Splitting up ` – MattDMo Jul 19 '21 at 14:52
@AdamSpriggs If you're using something like EJS, there should indeed be a certain tag to begin/end server-side JS blocks. I'm not sure VS Code or Sublime would have support for those, although there might be extensions that do. – Kelvin Schoofs Jul 19 '21 at 14:53
All valid points. I don't think a grammar exists for this particular flavor of SSJS. – Adam Spriggs Jul 19 '21 at 14:53
So ST4 is playing fast and loose and VSCode is more strict? – Adam Spriggs Jul 19 '21 at 14:58
1

@AdamSpriggs that seems to be the case, yes. ST4 strictly checks for the `` end tag while VS Code tries to handle it in a smart way. To be fair, with JSX/Babel/... your JS code can actually have XML/HTML-like tags as code, and it's technically not doing anything wrong due to the "illegal" (well, unexpected) JS splitting. – Kelvin Schoofs Jul 19 '21 at 15:04

Differences between VSCode and SublimeText 4 HTML+JavaScript syntax highlighting

1 Answers1