Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Bidirectional Highlight Function #45

Open
ImLowly opened this issue Jan 9, 2022 · 8 comments
Open

Feature Request: Bidirectional Highlight Function #45

ImLowly opened this issue Jan 9, 2022 · 8 comments
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@ImLowly
Copy link

ImLowly commented Jan 9, 2022

Describe the feature

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

Thanks!

@ImLowly ImLowly changed the title Feature Request Feature Request: Bidirectional Highlight Function Jan 9, 2022
@yandeu
Copy link
Owner

yandeu commented Jan 10, 2022

Thanks for your suggestions.

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

@yandeu yandeu added enhancement New feature or request help wanted Extra attention is needed labels Jan 10, 2022
@ImLowly
Copy link
Author

ImLowly commented Jan 10, 2022

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
Copy link
Owner

yandeu commented Jan 10, 2022

Thanks! I will try it :)

@candideu
Copy link

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

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

@yandeu
Copy link
Owner

yandeu commented Mar 30, 2023

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

@candideu
Copy link

candideu commented Apr 4, 2023

@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
Copy link
Owner

yandeu commented Apr 4, 2023

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

4 participants