Find and highlight substring?

1

Hi Everyone,

I’m using Codemirror 6, and looking for a way to:

  1. Search for a substring in the editor, for example a specific HTML element like <p>Hello!</p>
  2. Highlight that bit of code

Could anyone point me to where I should start looking for how to do this?

2

I think you would have to design your own plugin. But HTML plugins exist already.

You can see my very basic example of using CodeMirror 6 with HTML syntax highlighting and line numbers here.

It is very basic, but you might find it a good starting point.

3

@DougC Thank you so much! I will dig into that code and let you know if I have any questions :smile:

I’m a Codmirror novice so I’m still struggling with orienting myself in this ecosystem and am not always sure to look for answers or even what questions to ask.

Essentially I’m trying to design a system for children who are just starting to learn HTML. The idea is that they could mouse-over the rendered HTML in their browser (an iframe) and the corresponding source code would then be highlighted in the editor.

I have the first part working: I can capture the code that is being moused-over. That’s the easy part (using document.elementFromPoint in the iframe itself, and then posting that as a message). The part I’m struggling with is how to search for that code in the editor, and then highlight it. So, for example, if the the child mouses-over a GIF of kittens, the corresponding code in the editor would be highlighted: <img src="kittens.gif>

4

For anyone out there who may be interested, I have a 500 point StackOverflow bounty for this question running at the moment, here:

This is actually the second bounty I’ve offered for this same question, the first was unanswered. Any brave souls wish to try?

5

Answered here: How to search for and highlight a substring in Codemirror 6? - Stack Overflow