html.tmbundle
html.tmbundle copied to clipboard
textmate
Embedded JavaScript grammar can break the colorization
The following code doesn't highlight correctly in VSCode after //</script>. The problem is that the embedded JavaScript grammar consumes the full //</script> and the sourrounding html rule doesn't end. The grammar is stuck in js.
<!DOCTYPE html>
<html>
<head>
<script>
//</script>
</head>
<body>
</body>
</html>
There are many similar issues when the JS code is not complete and the JavaScript grammar is in the middle of some rule.
IMO the best thing would be to not include the full blown JavaScript grammar but embed a (simplified) variant that is aware of the </script> tag
Hi @aeschli, do you know by any chance if this issue occurs with other applications besides VSCode which uses this html.tmbundle TextMate grammar?
This is a rehash of #72, will leave this open for the moment as it might be good to look at the non-comment issues. Will post more about the comment problem in Microsoft/vscode-textmate#49.
This would reproduce in any editor using TM bundles if the exact same grammars are used for HTML and JavaScript.
@infininight, @aeschli, @alexandrudima
I think this issue can be corrected per my comment in Microsoft/vscode-textmate#49. https://github.com/Microsoft/vscode-textmate/issues/49#issuecomment-423029694
Looks like its about line 2937 in the PLIST file.
This was pretty easy to trace down using vscode-textmate's INSPECT after I modified 'Grammar.ts' to enable the debug output of which expressions were being attempted. That should be made an option of say 'INSPECTDEEP' or something. :)
IMO the best thing would be to not include the full blown JavaScript grammar but embed a (simplified) variant that is aware of the
</script>tag
@aeschli Do you have any tips on how you might recommend going about this? Are you talking about literally rewriting or copying a subset of the JavaScript grammar and inserting recognition of the end condition, or is there some shortcut or more efficient way to do this, like including specific repositories from an external grammar? I've tried doing things like this (in this example to embed the relevant portion of the CSS grammar into an HTML style attribute), but without any luck:
"patterns": [
{ "include": "source.css#rule-list" }
]
Is there a correct way to do that and I'm just doing it wrong, or is it just not possible? The documentation on embedded grammars is pretty sparse.
Are you talking about literally rewriting or copying a subset of the JavaScript grammar and inserting recognition of the end condition
That's what I meant. The idea would be to simplify it, maybe just keywords, comments and literals. That means duplication of some rules, but gives full control and avoids dependencies