Wrapping HTML elements with span tags (individual classes, text nodes, etc)

Hi there, CM5 user here.

I’m looking to ‘extend’ the html mode to wrap individual attribute values (like each css class on an html element) inside the .cm-string element.

Like this (I added the arbitrary class of cm-attr):

<span class="cm-string">"<span class="cm-attr">flex</span> <span class="cm-attr">items-center</span> <span class="cm-attr">justify-center</span>"</span>

I’d also love to be able to wrap span tags around text nodes like the ‘=’ sign between a .cm-attribute and a .cm-string, like this (I added the arbitrary class of cm-textnode)

<span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag emmet-open-tag">div</span> <span class="cm-attribute">class</span>

<span class="cm-textnode">=</span>

<span class="cm-string">"bg-black"</span><span class="cm-tag cm-bracket">&gt;</span>

<span class="cm-textnode">Hello, World!</span>

<span class="cm-tag cm-bracket CodeMirror-matchingtag">&lt;/</span><span class="cm-tag emmet-close-tag CodeMirror-matchingtag">div</span><span class="cm-tag cm-bracket CodeMirror-matchingtag">&gt;</span></span>

Is this doable? Do I need to write a separate mode or is there a handy regex I can spin up?



Yes, either a completely new mode or an overlay mode should be able to do this.

Lovely, thanks Marijn!