Umatched bracket not highlighted

[nitanagdeote]

As a user editing code, I want to know when a starting bracket (paren, bracket, brace, etc) does not have a corresponding ending bracket, so that it's easier to identify the syntax error and steps to fix it.

VSCode has this feature (see screenshot above)

VZCode does not - it shows the ending syntax error but does not highlight the starting bracket.

[curran]

It's possible we can make this work by simply adding CSS that targets .codemirror-nonmatching-bracket.

[curran]

There are cm-matchingBracket and cm-nonmatchingBracket classes, and they are already styled.

This is the non-matching style, which is unfortunately only highlighted when the cursor is next to that character (otherwise it doesn't even get that cm-nonmatchingBracket class unfortunately).

I researched this a bit and found:

• Adding an option to always highlight unmatched brackets According to the author of CodeMirror, this is not a feature that is supported or planned
• Always highlight unmatching brackets - also flagged as unsupported

However, there is another idea which is "Rainbox brackets"

• Bracket Pair Colorization in cm6?
• https://github.com/eriknewland/rainbowbrackets

I think what I can do with this is just make the styling for matching and unmatched backets more visible. It does not seem feasible to always highlight the non-matching brackets like VSCode does.

[curran]

From ChatGPT:

import { tags as t } from '@lezer/highlight';
import { createTheme } from '@uiw/codemirror-themes';

import {
  // Define colors for matching and non-matching brackets
  matchingBracketColor,
  nonMatchingBracketColor,

  // Other colors...
} from './colors';

const defaultSettingsVizhubTheme = {
  // Default settings...
};

function vizhubThemeInit(options) {
  const { styles = [], ...otherOptions } = options || {};
  return createTheme({
    ...otherOptions,
    styles: [
      // Other styles...
      {
        tag: t.matchingBracket,
        color: matchingBracketColor,
        backgroundColor: 'transparent', // Optional: set background color for matching brackets
      },
      {
        tag: t.nonmatchingBracket,
        color: nonMatchingBracketColor,
        backgroundColor: 'transparent', // Optional: set background color for non-matching brackets
      },
      ...styles,
    ],
  });
}

export const vizhubTheme = vizhubThemeInit();