Customizing the rendering of matching brackets

[jeud]

• VSCode Version: 1.8.1
• OS Version: Windows 10

Hi there

Is it possible to customize the cursor for the matching brackets/parentheses ? e.g. change to underline instead of block

it looks unclear sometime

Thanks all

[mousetraps]

@jeud thanks for reaching out! Not customizable at the moment, but we're open to ideas. You mentioned "underline" - any other ideas to increase visibility?

[fatalitynt]

Hello!
Make more user-settings about brackets and cursor, for example:

editor.bracketMatchingStyle: rectangle|block|underline
editor.bracketMatchingColor: #rgb
editor.cursorColor: #rgb

I found some .css about brackets in source, and I hope it is not difficult make brackets more customizable.

[tadlambjr]

Making the brackets bold would be good too.

[csalv5]

Also #3788, take it into account please, underline is far less cluttered.

[cesaraaron]

#22504 as well.

For the color looks like Sublime uses some key of the current .thTheme (see 22504).
It'd be great as 'editor.bracketMatchingColor' like @fatalitynt suggested but that would add an unnecessary option to the settings imo.

[jungchris]

This issue appears to duplicate Better bracket highlight visibility #12402

[rnithish]

Highlighting with a mild color based on the current user theme, seems to be most appealing to me.

[jafrajarvy292]

1. Agreed the boxes should be removed and replace with perhaps background coloring. The problem is the vertical box lines look too much like the cursor itself, making it difficult to find your cursor in cases where it's overlapping a box line. Yes, I know the cursor is bold and you can still find it, but I find it blends in more than it should.

2. Allow customization on the matching bracket/parenthesis pairs. The boxes aren't enough to identify the matching pairs, as others have mentioned.

You can reference how Notepad++ does it. I think they handle it very well.

[DarthPestilane]

Perhaps we can use Subtle Match Brackets which changes the block into underline
Like this:

https://marketplace.visualstudio.com/items?itemName=rafamel.subtle-brackets
thanks for Rafa Mel

[notrealdev]

How to change Bracket color or underline? not background and border!

[mrchief]

Subtle Match Brackets works but is slow to load/initialize.

[dmstern]

As @DarthPestilane said, SubtleBrackets by @rafamel does a really good job here. 👍

Examples:

Styling documentation: https://code.visualstudio.com/docs/extensionAPI/vscode-api#DecorationRenderOptions

[jcklpe]

@dmstern Is there someplace in documentation that I can get a full list of the different styling properties available to Brackets Colorizer? I tried some of the subtle brackets ones you show above and they work! But I don't know how many other CSS properties work also. It's hard to tell because the JSON format for the CSS properties are done in a style that's different than the naming convention of CSS itself so I assume there's some additional level in JS that's translating it etc over to CSS styling for the plugin etc.

[mrchief]

Bracket Pair Colorizer works pretty well.

[dmstern]

Is there someplace in documentation that I can get a full list of the different styling properties available to Brackets Colorizer?

@thedonquixotic Yes, there is:

-> https://code.visualstudio.com/docs/extensionAPI/vscode-api#DecorationRenderOptions

[jcklpe]

@dmstern Excellent. I was linked it by the guy who does Bracket Pair Colorizer when I asked him in his git. For some reason borderSpacing does not seem to work, and this seems to be an issue amongst a variety of extensions as you can also see here: wayou/vscode-todo-highlight#96 (comment)

[jabacchetta]

The subtle brackets extension is pretty much what I believe a lot of us are looking for, but it has issues (HTML/JSX brackets not highlighting, for example). Would love to see this feature (underline) supported natively.

[jaredh159]

If you're comfortable just tweaking the colors, you can do so in your settings.json, like so:

More useful stuff like this at https://vscode.readthedocs.io/en/latest/getstarted/theme-color-reference

[phuze]

I'll add that Highlight Matching Tag is a top notch extension. I use it, along with a setting to remove the occurances highlighting: "editor.occurrencesHighlight": false

Result:

[kanlukasz]

It could be merge with this -> #46804

[karan221]

@jeud thanks for reaching out! Not customizable at the moment, but we're open to ideas. You mentioned "underline" - any other ideas to increase visibility?

Changing the brace color to a brighter color on matching would be nice.

[injust90]

@jeud thanks for reaching out! Not customizable at the moment, but we're open to ideas. You mentioned "underline" - any other ideas to increase visibility?

In IntelliJ I was able to bold, italicize, or underline matching brackets. Was able to modify my matching brackets in a way that was most visible to me.

[nahuel]

Another idea, colorize all the enclosed expression instead of only the matching bracket, like Emacs does here:

Emacs config:

(setq show-paren-delay 0)
(setq show-paren-style 'expression)
(show-paren-mode 1) 
(set-face-attribute 'show-paren-match 
                     nil 
                     :inherit 'unspecified
		     :background "darkgreen"
		     :foreground 'unspecified 
                     :weight 'unspecified )

[leecade]

I'd prefer underline

[dmstern]

For those who are looking for more cool examples:

I made the matching brackets style also match the new Ubuntu 20.04 switch button outline style:

settings.json:

"subtleBrackets.style": {
    // https://vshaxe.github.io/vscode-extern/vscode/DecorationRenderOptions.html
    // rounded border:
    "borderWidth": "2px",
    "borderStyle": "solid",
    "borderColor": "#b97056",// "#99999977",
    "borderRadius": "8px",
    "fontWeight": "bold",
    "backgroundColor": "#99999922",
    "letterSpacing": "3px",
  },

Or monochrome:

[LMCyber]

I deactivate the box here...

[setanarut]

there is no properly working extension available, no one has been dealing with this issue for years, unbelievable.
rafamel/subtle-brackets#31 (comment)

[jonjieviduya]

Any update with this?

[karan221]

Check this https://youtube.com/shorts/elNuPq3GFXg?feature=share .

[jonjieviduya]

@karan221 underline is different from changing colors.

[karan221]

@karan221 underline is different from changing colors.

Just sharing, I got what I had requested in a comment above.

[effinsky]

Is there any way that I could change the color of the highlighted brackets/braces etc? Something like here? Just the ones I'm currently in the scope of, I mean :)

I cannot seem to find the right option in the settings, and I thought I would among:

Thanks a bunch!!

[jusmarks]

The main problem is the cursor can be hard to spot if it overlaps with the bracket's border. If this problem were solved then I think custom rendering of matching brackets might not be necessary.

Maybe in this case the border could be made transparent (or some other color)? This could be achieved with a property similar to editorCursor.background:

editorCursor.background: The background color of the editor cursor. Allows customizing the color of a character overlapped by a block cursor.

With something like:

editorCursor.borderBackground: The border background color of the editor cursor. Allows customizing the color of a border overlapped by a cursor.

[PyaeSoneAungRgn]

any update?

[tzargar8]

So this still hasn't been fixed? Should be a 5 minute job.

Microsoft...