Highlight HTML Elements in Preview when clicked in the Code Editor

1

I am doing a code editor a bit like the chrome inspector where the highlighted HTML tag corresponds to a highlighted element in the preview.

Screen Shot 2021-11-04 at 6.55.41 PM
Screen Shot 2021-11-04 at 6.55.41 PM1616×812 25.3 KB

I have almost everything working, I have a function that will highlight the h1 element by giving it the XPath from the document root.

Is there an easier way to do this?

If not, is there a way to know what tag I clicked and highlighted in the code editor so I can get the XPath.

2

In CodeMirror 5, not really. In 6, you could use the syntax tree to find the correspondence between syntactic constructs and source locations.