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

**URL:** <https://discuss.codemirror.net/t/how-to-achieve-the-colouring-of-class-names-on-html-inline-css/1057>\
**Category:** Uncategorized\
**Created:** [December 22, 2016, 6:55pm UTC](https://discuss.codemirror.net/t/how-to-achieve-the-colouring-of-class-names-on-html-inline-css/1057 "2016-12-22T18:55:47Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![royst0n](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/royst0n/32/310_2.png) [@royst0n](https://discuss.codemirror.net/u/royst0n)\
**Post date:** [December 22, 2016, 6:55pm UTC](https://discuss.codemirror.net/t/how-to-achieve-the-colouring-of-class-names-on-html-inline-css/1057/1 "2016-12-22T18:55:48Z")

</div>

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):

![](https://discuss.codemirror.net/uploads/default/original/1X/84cb59618d8902c5526daa4ba1b196cf4171920c.png)

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.

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [December 22, 2016, 9:21pm UTC](https://discuss.codemirror.net/t/how-to-achieve-the-colouring-of-class-names-on-html-inline-css/1057/2 "2016-12-22T21:21:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![royst0n](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/royst0n/32/310_2.png) [@royst0n](https://discuss.codemirror.net/u/royst0n)\
**Post date:** [December 23, 2016, 10:20am UTC](https://discuss.codemirror.net/t/how-to-achieve-the-colouring-of-class-names-on-html-inline-css/1057/3 "2016-12-23T10:20:20Z")

</div>

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