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

1

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?

Thanks,

DB

2

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

3

Lovely, thanks Marijn!