processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.37k stars 1.32k forks source link

Hilighted brace style or cusor enhansment for improved visibility #3066

Open syonfox opened 6 months ago

syonfox commented 6 months ago

Increasing Access

image

As you can see in the images above when braces are highlighted you cannot visually tell if the cursor is on the at position 1, 2, 3,or 4. ie myFunction1(2i3)4

By improving this we let people quickly visually determine the exact position of there cursor so they know where they are typing at all times.

Feature enhancement details

Some ideas how to improve this would be to use a highlight color instead of a border box.

Another possibility is to add the feature of cursor style so that we can select the block or underscore courser.

Let me know what you thinks

katiejliu commented 5 months ago

Possible example of how highlighting color would work on Brackets UI

Screenshot 2024-04-12 at 11 23 42 AM

But this has its own visibility issue as the highlight over the line of code being grey (at least in this case) is not super visible/contrasted

Other code editors such as VS code use border box and I personally prefer border box to the highlight color