Change color of 'less than' and 'greater than' from around tags in HTML with intellij without affecting vue templates

Question

we are looking at a lot of HTML usually.

Now, <, > and </ around the tags are splattered everywhere. But unless there is a syntax error, those really have no value. And syntax errors are highlighted.

So instead of looking at:

I would prefer to look at, note you can change this in

Settings -> Editor -> Color scheme -> HTML -> HTML Code

the problem is if I change it this way, the vue templates get affected as well and all condition operators become gray too like the <>

mycomponent.vue

notice all and in

is there a different way to do it?

Answer 1

This is a perfect case of using language injections

If you don't have explicit vue.js support already set up (or if it doesn't handle it), you can define language injections to highlight that area as javascript expressions.

https://studgeek.com/2010/08/16/intellijidea-webstorm-knockout-data-bind-attributes/

Shows how a dummy javascript context can be set up for arbitrary xml attributes.

In this (quite dated) image, you can see the Prefix is set to a random window variable object, and the suffix ends the object, this simply wraps the code in the xml attribute with something roughly resembling the correct context for the javascript.

The data-bind xml attribute in this case, would be swapped out for v-if v-else or any other vue attributes that take a binding that looks similar to javascript.

If this fails to work, it sounds like an IntelliJ bug which should be reported.

Answer 2

You can try if rainbow brackets plugin works for you.

It changes the color of brackets and gives each pair of opening and closing bracket a unique colour to make it easier to identify which belongs together.