Accessibility and display options

I’m not sure if this is already possible, but wondering if there’s a way to customize the display options in the code editor? For example when clicking on a function definition, any function calls within a form are highlighted, very lightly with a shadow. Is there a way to make this highlighting more visible?

I agree, having the highlight a bit more prominent would be good.

One work around option is to highlight and use Ctrl + F and then enter. This highlights all matching words in yellow. Note that it does search for matching words not just the function calls.

I went about adjusting these colours using the method from this post (post 8):

Hack for Full Screen Editor - hide code snippets

Anvil Defaults - Originally:

.CodeMirror-focused .CodeMirror-selected {background: #d7d4f0;}
.CodeMirror-activeline-background {background-color: rgba(0, 100, 255, 0.08) !important;}
.cm-matchhighlight { border-bottom: 2px solid rgba(0, 0, 0, 0.1);}

What I changed it to (using Stylus)

/* adjusted code editor highlighting  */
.CodeMirror-focused .CodeMirror-selected {background: #3aa3fe40 !important;}
.CodeMirror-activeline-background {background-color: #5a9bff47 !important;}
.cm-matchhighlight {
    border-bottom: 2px solid rgba(143, 180, 238, 0.9);
    background: #008dff66;
}

The matchhighlight colour is the one you want to edit for your specific issue…
There are plenty of other adjustments one could make using this method too…

YFyRDaZ6ZM

2 Likes

This is cool! Thanks Stu, I will have a crack at it.