[Question] Codeblock highlight for Javascript Browser preview

[mmailaender]

First of all - I love this plugin. The highlighting of my current active block is helping me a lot in visibility and clearness!

After playing around, I wondered if there is an extension existing that does the same as yours only in the preview browser:

Do you know something like that?

PS: Would you like to activate sponsoring for this GitHub project? Then I can send you some ❤️

[leodevbro]

[UPDATE]: Oh, I think now I understand the question. So you mean, when developer focuses an element (div/li/button...) in the code editor, the preview window should also highlight the exact same box, right?

[ORIGINAL]: In the preview, isn't that already very easy? like this: This css style will create boxes for all elements.

body * {
  outline: 2px solid rgba(0, 0, 200, 0.3);
}

Or maybe I did not understand the question?

[mmailaender]

Your Update describes it pretty well 🙂

[leodevbro]

Well, this new idea seems really cool and original. I am interested in seeing it in action. Though, I think it's very beyond my skills to plan and implement such feature. Maybe I will be able to do it if I have enough time to research/learn and do some experiments, but my time is very limited currently, so maybe some other developers will pick up this idea and consider implementing it.

[leodevbro]

At least I can say one possible way to do it (And it kinda seems that it's not so far from my skills, well, I'll think about it). So, maybe, when developer focuses on a div (or li or button or any element) in the code, the extension should inject special id (or classname or custom attribute) in the div tag.

For example, we have this element:

<div>hello</div>

When focused in the editor, the extension should inject special identifier (id or custom attribute, let's do custom attribute):

<div data-isfocused="true">hello</div>

And of course we should have a global style like this:

[data-isfocused="true"] {
  outline: 2px solid rgba(0, 0, 200, 0.3);
}