mugiwara85 / CodeblockCustomizer

Codeblock Customizer plugin for Obsidian
MIT License
147 stars 7 forks source link

Feature request: highlight paired brackets #80

Closed mettavi closed 1 month ago

mettavi commented 3 months ago

This would be an awesome addition to this great plugin for Obsidian.

As a coder, I often have to read large blocks of code with complex nesting. It is often hard to see where nested blocks end without the highlighting of paired brackets/braces, like you have in code editors like vscode.

I wonder if others agree with this.

mugiwara85 commented 3 months ago

You mean like Notepad++ does it? When you click next to a bracket then the opening and closing one gets highlighted? image

mettavi commented 3 months ago

Yes @mugiwara85 , that is what I meant.

I wonder if it is hard to code in your plugin?

mugiwara85 commented 3 months ago

I do not know it yet, but I will try to do it. It might take some time though.

mettavi commented 3 months ago

Thank you so much for trying to do it.

And thank you for your great plugin! 😄

mugiwara85 commented 1 month ago

I think you can test it tomorrow :) image

I just have to add some options (setting the color, enable/disable this feature). I will push it tomorrow, and you can test it. I keep you posted. Sorry it took a long time to finish it.

mettavi commented 1 month ago

Thanks a lot for your hard work, I really appreciate it. 👍

Looking forward to testing it!

mugiwara85 commented 1 month ago

Almost there. I just noticed a little problem, but hopefully I can finish it soon.

mugiwara85 commented 1 month ago

Hi @mettavi, sorry for the delay. Please test it thoroughly, with every possible case you can think of (e.g. code blocks in list etc.). Please also keep an eye on the console, if any errors arise (Ctrl+Shift+I).

Feel free to give feedback. Maybe the default bracket highlight colors are not the best, but they sure are visible :D I also set the background color of the highlighted brackets to the background color of the code block. I can remove it, if you don't like it. But as I said, please give a feedback :)

mugiwara85 commented 1 month ago

Hi @mettavi. I just realized that CodeMirror has an option for this. I implemented that one. It is definitely better than my own. You can now highlight non-matching brackets as well. For example if there is an opening/closing bracket missing, than it will be highlighted. Or if the brackets do not match, e.g. print("Hello"], both of them would be highlighted, but with different color. But please still do give a feedback :)

mettavi commented 1 month ago

Hi @mugiwara85,

I had a look at the new feature and it is working well!

One minor comment. I usually have the "highlight current line" feature enabled. With bracket highlighting, this adds a different color background to the closing bracket, but not to the opening bracket. Here is an example:

Screenshot 2024-05-21 at 6 14 19 pm

This makes it easier to see the closing bracket. In a large code block, it would be easier to see the opening bracket if it also had a background highlight.

But that is enhancement only. Apart from that, it looks great.

Thanks again for being so responsive to user feedback, I really appreciate developers like you! 👍😀

mugiwara85 commented 1 month ago

Hi @mettavi, it actually adds it to the opening bracket it as well, you just can't see it, because the background color is the same as the code block background color. You can see it, if the two brackets are in the same line.

Should I add a color picker so you can set the background color? Or just set the background color for one specific color?

mettavi commented 1 month ago

Hi @mugiwara85,

Ah, OK, thanks for explaining that. I can see now that both brackets have the background color.

It would help a little with visibility to have the bracket background contrasting with the code block background, especially in light mode and on the matching bracket (the one which isn't currently selected).

I think it would work well for me to set it to the same as the "Codeblock active line color," because I usually enable "codeblock active line highlight" (and I don't really need the contrasting background on the selected bracket, only on the matching bracket).

So yes, it would be great to have a color picker for the bracket background color, but only if it is not too much work! (But as I said, it is not a major problem, but would be a nice enhancement!) 😊

Thanks again for all your help. 🙏 I will let you know if I have any further feedback!

mugiwara85 commented 1 month ago

Hi @mettavi,

Your wish is my command. I added two more color pickers (for matching bracket background colors, and non-matching bracket background colors). You can also set these colors language specific.

Note: There was a small bug, where the new settings were not imported into existing themes. This has been fixed, but unfortunately, since I don't know, which default theme was used for the theme a user created, I decided that for these user themes the Obsidian settings will be imported. This means that the background colors are set for the Obsidian theme. From now on if you create a new Theme it also saves which theme was used as a base theme. This will make it possible to import the correct settings in the future.

mettavi commented 1 month ago

Thank you so much @mugiwara85, it is working perfectly now! 🙏