question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[html] prevent that embedded grammars can corrupt syntax highlighting of rest of document

See original GitHub issue

Currently, when writing embedded language, a lot of the times the embedded grammar can cause disruption to the rest of DOCUMENT:

This is html grammar.

image

Imagine editing css in a <style> at the <head> of a long html file. The rest of document will be constantly re-tokenized and (wrongly) syntax highlighted. This doesn’t look good UX-wise and will probably have some perf impact.

For the following grammar and setting:

- name: source.css.embedded.html
   begin: <style>
   end: </style>
   patterns:
   - include: source.css
"embeddedLanguages": {
  "source.css": "css"
}

I hope VSCode can only apply CSS grammar to the section between <style> and </style>, so when I’m typing out my incomplete CSS VSCode would just re-tokenize and highlight until </style>, but not rest of the document.

/cc @alexandrudima

Also would like to hear @aeschli’s opinion, as you are writing the html grammar.

Issue Analytics

  • State:open
  • Created 7 years ago
  • Reactions:13
  • Comments:35 (21 by maintainers)

github_iconTop GitHub Comments

3reactions
BLaDZercommented, Feb 16, 2018

Same problem here with embedded html in php file that break not only html highlighting. screenshot from 2018-02-15 12-21-47 copy

2reactions
octrefcommented, Feb 20, 2017

That’s what sublime have:

https://www.sublimetext.com/docs/3/syntax.html

image

As an alternative, is it possible for us to have such a “pop” rule?

What could be done is writing a HTML grammar that contains rules for embedded css and JavaScript, in particular the appropriate end rules for </style> and </script> tags.

Our only option to stay TM grammar compatible is to do what @aeschli suggests, where we have a special CSS grammar that expects it to be embedded inside HTML and has end rules for </style> everywhere.

It’s possible to modify the CSS grammar to make it expects itself to be embedded. But I don’t know any way to do that by only modifying HTML grammar now in VSCode.

And I believe this is a problem shared by embedded language support. I don’t think it’s reasonable to ask each language’s grammar to expect itself to be embedded. For example in Vue’s single file component, one can embed css/sass/scss/less/stylus/postcss. I hope there is a way to mark the end of embedded region in HTML, instead of adding a negative lookahead to each grammar rule in these 6 languages.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Change syntax highlighting of embedded code based on a ...
I'm trying to write a TextMate grammar for a VS Code language extension. Take the following example (lang=css attribute2=something-else) ...
Read more >
syntax.txt - Vim
If you want Vim to overrule your settings with the defaults, use: :syntax on :hi-normal :highlight-normal If you are running in the GUI,...
Read more >
Safari Technology Preview Release Notes - Apple Developer
If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS Monterey, or...
Read more >
Beyond Compare User Guide
HTML folder comparison reports can now embed links to file comparisons. Improved appearance on high DPI (retina) displays. Version Compare now compares the ......
Read more >
Changelog — Python 3.11.1 documentation
gh-95445: Fixes the unsuccessful removal of the HTML document directory when ... in-process code that an extension module or embedding use could pull...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found