How to achieve the colouring of "class" names on HTML inline CSS?

1

Hi all!

I’m building a web app using CodeMirror which helps to remove redundant CSS from email templates and I want to add additional highlighting to all CSS selectors within inline HEAD styles and class names within the BODY of HTML, in inline CSS styles.

It’s easy to identify the CSS selectors in HTML HEAD style blocks — they have .cm-qualifier attached.

But how can I add an additional class name to all classes on HTML tags within BODY?

I want to achieve this highlighting in yellow (but in CodeMirror instead of Photoshop):

Currently, in CodeMirror, all attributes on HTML tags have the same class, “cm-string”.

I saw there is doc.markText but looks like it only adds class to manually targeted range of string, not certain attributes from HTML.

Thank you.

2

You’d have to write a mode that wraps the HTML mode, recognizing attributes and adding an extra class to them. Or, if you don’t care about also coloring patterns that just look like class attributes, for example the phrase class="foo" in the document text, you could do this as an overlay which simply matches a regexp against the text, which is simpler.

1 Like
3

@marijn thank you for prompt reply. I’ll try Overlay!