Bracket Pair Colorization for HTML tags

[tgrelka]

I love the new, native built-in bracket pair colorization feature of VS Code, colorful brackets are useful for quickly identifying the current block.

However, I still miss colorization in HTML files and templates. There are some extensions, but these have the same shortcomings as the (now replaced) Rainbow Brackets 2 extension, as well as quite “ugly” rendering. IntelliJ IDEA has a popular plugin (called Rainbow Brackets as well) which handles HTML (and XML) opening and closing tags very nicely: The tag name itself still has the default highlighting, in my case it’s a light green. However, the angle brackets <> and forward slash / are colorized according to the block level.

Please take a look at the attached example of this:

It would be really nice to have a similar feature with similar rendering in VS Code itself, because especially for structured files like HTML, with lots of nesting, more color would be beneficial for a quick and at-a-glance overview of the document structure.

[vintprox]

Currently, there is a workaround in VS Code:

  "editor.language.colorizedBracketPairs": [
    ["[", "]"],
    ["(", ")"],
    ["{", "}"],
    ["<", "</"],
    ["<", "/>"]
  ],

But it's buggy. It doesn't understand language specifics for identifying something as "bracket". It can recognize a bracket on something that is supposed to be a self-closing tag and lead to incorrect pair, for example. Even though, it may seem just as someone's illiteracy in XHTML.

[Sequoya42]

Thanks @vintprox Its indeed buggy and does not match correctly for < /> (like img tag). Would love for this to be integrated in vscode, would make reading HTML 10x more confortable

[SpacemanOG]

I just configured my system following the instructions given here: https://www.stefanjudis.com/snippets/how-to-configure-vs-code-bracket-colors/. However, it doesn't work for HTML! Any suggestions on whether there's a way to solve it?

[MuhsinEmreAYGAR]

I just configured my system following the instructions given here: https://www.stefanjudis.com/snippets/how-to-configure-vs-code-bracket-colors/. However, it doesn't work for HTML! Any suggestions on whether there's a way to solve it?

I had this problem too. Did you solve?

[OtherHorizon]

I just configured my system following the instructions given here: https://www.stefanjudis.com/snippets/how-to-configure-vs-code-bracket-colors/. However, it doesn't work for HTML! Any suggestions on whether there's a way to solve it?

Referring this does it help?

[SpacemanOG]

Mine also doesn’t work for HTML

Sent from my iPhone

On Sep 25, 2022, at 00:58, Blip blop @.***> wrote:



I just configured my system following the instructions given here: https://www.stefanjudis.com/snippets/how-to-configure-vs-code-bracket-colors/. However, it doesn't work for HTML! Any suggestions on whether there's a way to solve it? Referring thishttps://github.com/microsoft/vscode/issues/159586#issuecomment-1256404578 does it help?

— Reply to this email directly, view it on GitHubhttps://github.com/microsoft/vscode/issues/137504#issuecomment-1257044802, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AZWN5ZTJSXMUT6T5TYISGJTV75FOLANCNFSM5IL6S3PQ. You are receiving this because you commented.Message ID: @.***>

[daslicht]

+1 This would be a very useful feature ! bump

[dnhuan]

Looking forward to this feature!

[juanchavezlive]

Bump !

[nano0018]

Bump!

[daslicht]

A connecting line woudl be very usefull either eg like this but for html tags:

[alan-venv]

Bump !

[Odd67]

BUMP

[kemoboy]

bump

[davyd-souza]

+1

[Sov3rain]

Would be very nice, +1!

[Ken-SBIT]

This would be a most-appreciated addition! +1

[brunomaria71]

need this!

[AlexanderGeorgiou]

Bumppp

[henrikvilhelmberglund]

["<", "</"],
["<", "/>"]

(kind of) works for HTML but not for other markup like Svelte, it would be nice if this could be fixed so all HTML like scopes could benefit from colorized brackets.

[alejandro-venegas]

Bump

[starball5]

Related on Stack Overflow: VSCode - Bracket Pair Colorization in HTML/CSS (How to?)

[dawidmachon]

bump

[Sdju]

bump

[developer-256]

You don't need opening and closing tags to be colored. What you need is the Indent Guides to be colored, and you can achieve this without any extension.

1. Hit Ctrl+P in VS Code.
2. Write >settings.json and hit Enter.
3. Paste the following code:

"workbench.colorCustomizations": { "editorIndentGuide.activeBackground1": "#c3e88d" },

That should be it.

Change the color of indent guide: You can also change the color of indent guide to whatever you like by simply modifying the hex value to your desired color or by hovering over the color and selecting the one you prefer.

"workbench.colorCustomizations": { "editorIndentGuide.activeBackground1": "#ffcb61" },

Also this works with every other programming language.

[RudyRSDev]

anyone still on the search for this

[daslicht]

That should be it.

doesnt work here, no matter where i click the tag:

[developer-256]

That should be it.

doesnt work here, no matter where i click the tag

It works where code is indented and also uninstall Toggle Bracket Guides extension and remove "editor.guides.bracketPairs": true, for settings.json as it cancels the effect of above command

[developer-256]

That should be it.

doesnt work here, no matter where i click the tag

[henrikvilhelmberglund]

It works where code is indented and also uninstall Toggle Bracket Guides extension and remove "editor.guides.bracketPairs": true, for settings.json as it cancels the effect of above command

I don't want to disable bracketPairs though because I like it for coding. The whole point of bracket pair colorization is that the bracket color is the same color as the indentation color.

There is a more reasonable workaround for vanilla HTML but it requires you to always close the elements (even void elements).

"[html]": {
    "editor.language.colorizedBracketPairs": [
      ["<", "</"],
      ["<", "/>"]
    ],
  },

A real fix would be better though, especially for code where HTML is included as markup.

edit: as mentioned below, you do need to close every void element. Forgetting to do so will mess up the matching.

[developer-256]

A real fix would be better though, especially for code where HTML is included as markup.

It isn't a fix. Rather it makes your code much more messed up because of tags like <img src="" alt=""> or <input type="text"> that do not have a closing tag and this code snippet matches it with next /> and in html both these tags are necessity so entire code becomes very messed up.

For reference look at the picture:

Test this theory with a long html code and you will get the idea.

[daslicht]

That should be it.

doesnt work here, no matter where i click the tag

That just highlight the indention and wont work if code is indented like this:

[AntonSvaromir]

"editor.language.colorizedBracketPairs": [
        ["<", "/>"],
        ["<", ">"],
        ["</", ">"],
        ["{", "}"],
        ["[", "]"],
        ["(", ")"]      
    ]

It works fine, only the arrow function looks strange, the arrow is red.

[fwqaaq]

It works fine, only the arrow function looks strange, the arrow is red.

Yeah, how to solve this problem, the red looks very uncomfortable.

[henrikvilhelmberglund]

It works fine, only the arrow function looks strange, the arrow is red.

Yeah, how to solve this problem, the red looks very uncomfortable.

Just remove ["<", ">"],.

[Ken-SBIT]

It works fine, only the arrow function looks strange, the arrow is red.

Yeah, how to solve this problem, the red looks very uncomfortable.

Just remove ["<", ">"],.

Nope. That mucks up regular tags. It messes up greater-than comparisons, too.

[baicaitomato]

bumppp