Feature Request: Bidirectional Highlight Function

[ImLowly]

Describe the feature

• When you highlight an element in the live preview it highlights the respective code in VScode.

Thanks!

[yandeu]

Thanks for your suggestions.

I thought about implementing this but don't know how to do it yet.

[ImLowly]

Well, I just started coding, but if you come into the web dev discord on a good day you can get some help from people who would use the feature.

https://discord.gg/Umn7SY4W

link expires in 7 days

[yandeu]

Thanks! I will try it :)

[candideu]

There's still quite some interest for this feature: #71

@yandeu Let us know what kind if help you would need 😊

[yandeu]

I know. I would be awesome. I just don't know where to start.

[candideu]

@yandeu someone in the web dev Discord suggested the following:

they'd need to inject js into the live server, which they probably have, and just have it pay attention to what elements are being hovered and do the same thing to pass that info back
(Message link)

[yandeu]

The part of knowing what element is hovered in the browser is easy. But how to highlight the code or move the cursor in vscode?

[ashtray127]

If this is still being working on, then something that could work would be adding an arbitrary page to the server (maybe like /fiveserver/api/highlight ) or something, and then having the page make a POST request whenever something is highlighted, which would update some storage which holds the current hovered id and class(es), and then use the syntax highlighting in vscode with injected grammers ( https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide#injection-grammars ) to match whatever id / classes are hovered.

The only issue I can see with this is if I've misunderstood the way vscode syntax highlighting works, or if the user would need the path used for the POST requests. If the second one is a problem, you could have the server for this running alongside the server hosting the content, but that may take up more resources.