Remove squares around brackets in code?

[madasebrof]

Okay, I know this is going to sound so silly, but is there a way to disable bracket highlighting & matching (or replace with underscores) in Elixir code sections in Livebook???

1. The cursor is almost invisible if next to a bracket with a square around it.
2. It's just plain distracting (to me :) )

ps Livebook is amazing!!! Thank you so much for this!!!

pps looks like the simplest thing is to just be able to disable it somehow?

https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html#matchbrackets

Also, there are plugins for VS Code that do this, e.g. https://github.com/rafamel/subtle-brackets

[madasebrof]

Okay, so if this bothers anyone else, here is the quick fix:

edit assets/webpack.config.js

change section with MonacoWebpackPlugin to:

      new MonacoWebpackPlugin({
        languages: ["markdown", "elixir"],
        features: ["!bracketMatching"] // <--- add this
      }),

then run:

mix dev.setup
mix dev.build
MIX_ENV=prod mix escript.build
./livebook server

If you want to install it (so you can run livebook server from any directory):

MIX_ENV=prod mix escript.install

Ahhh. So much better ;)

[jonatanklosko]

Hey @madasebrof, sorry for the late reply!

Would it help if we changed the whole background like this?

as compared to

diff --git a/assets/js/cell/live_editor/theme.js b/assets/js/cell/live_editor/theme.js
index 361b72dc..2105e499 100644
--- a/assets/js/cell/live_editor/theme.js
+++ b/assets/js/cell/live_editor/theme.js
@@ -43,6 +43,8 @@ const theme = {
     "editorSuggestWidget.selectedBackground": "#2c313a",
     "input.background": "#1b1d23",
     "input.border": "#181a1f",
+    "editorBracketMatch.border": "#282c34",
+    "editorBracketMatch.background": "#3e4451",
   },
 };

As per microsoft/vscode#19534 the configuration is quite limited. We could probably replicate what the extension does, but I think that would be an overkill code-wise.

[jonatanklosko]

Another solution would be to use a different cursor color (for example blue), but I'd prefer to keep it gray, because otherwise it could be confusing in collaboration mode where people generally have colorful cursors.

[madasebrof]

Yeah, for sure no outline and a slightly lighter background would be better! Don't you agree?

It's funny, when you look at the example you posted, how difficult it is to see the cursor--yet that is the default that ships with VSCode!

Thanks for the reply!

ps I personally am not bothered by just disabling bracket matching altogether, as code chunks in Livebook tend to be fairly small and (to me) the bracket matching doesn't add much value.

[jonatanklosko]

Yeah, for sure no outline and a slightly lighter background would be better! Don't you agree?

Yeah, I'm positive this is a good change :)

I'm not opinionated about disabling it or not. It's probably more useful for languages that use brackets for blocks, but I think it doesn't hurt (provided the cursor is visible).