CC 2017 - CodeMirror matching tags - how to keep font colors

[marcinzemczak]

Matching tags is a great feature but it bugs me that the whole matching tags change their font colours. I know how to define the colours of them in the main.less theme but I can't figure out how to change background only but keep the font colours. It would be useful to me as I use PHP scripts within the HTML tags and they all go black (or whatever colour I define in .CodeMirror-matchingtag class). If I remove the color: definition from there it turns white which is even worse.

[BenPleysier]

Have a look at Learn how you can customize the colors of your code elements in Dreamweaver.

[marcinzemczak]

I said I know how to customize the colours. I've read this article from start to the end many times. There no word in that manual how to keep the font colour and change only a background of matching tags.

This sets the font colour of selected matching tags to black:

.CodeMirror-matchingbracket, .CodeMirror-matchingtag {

    background-color: rgba(0,195,255,0.5);

    color: #000!important;

}

This sets the font colour to default white:

.CodeMirror-matchingbracket, .CodeMirror-matchingtag {

    background-color: rgba(0,195,255,0.5);

}

Question is: how to keep the font colours defined with .cm-*** classes within the selected matching tags?

[Nancy OShea · Accepted solution]

See if this helps:

Solution: White on Mint Green Code Color.

Nancy

[Jon Fritz]

Are you trying to get the text color to stay "themed" rather than go to black or white when you click on a tag, like it does when you drag to highlight the code?

In effect, trying to get this (when you click in the tag)...

...to look like this...

If you ever find out how to do that, let me know, I've been digging through CodeMirror and Brackets posts all across the internet trying to find a way to do it. I've figured out a lot of interesting things, but this one is totally eluding me.

[marcinzemczak]

@Jon Fritz II, that's exactly what I'm trying to do.

Tag matching and colour coding are excellent features but what's the point of having them when they don't work together on the tag you actually edit?

[Jon Fritz]

One of the other contributors figured out the right CodeMirror selectors to do this.

It does take a little effort to modify them to your theme if its different from the one he used, but it works. He posted it to this thread...

Solution: White on Mint Green Code Color.

This is what I have now, when I click a tag...

And here it is when the code is click/dragged to highlight...

[marcinzemczak]

The ohadobeyousocrazy's solution works well. I actually tried to do something similar but I've replicated my code colouring classes within .CodeMirror-matchingtag class. Never thought that it should be .CodeMirror-focused.