Syntax highlighting should have more contrast and use more colors for different source elements

[nineff]

Description

Currently, the Webapp editor uses the same color for many different syntax elements, which can have vastly different meaning but are not really highlighted as such.

For example, these types all are in the same default color (mostly black/white depending on color scheme):

• Content
• Function arguments
• Dictionary keys
• Operators and Parentheses
• Headings
• some math elements
• possibly more

This makes it difficult to easily and quickly spot where a definition ends an a new one starts and so on.
It is especially bad in dark mode, but the light theme could also use some improvements.

While I can't share the specific document where I first really noticed this problem, I have recreated the issue with this dummy text:

Have you spotted at first glance, that:

• this "lorem ipsum" text contains manual linebreaks?
• there is a non breaking space within the text?
• there is content embedded in a function call?
• the c dictionary contains an a and b key and where the second one starts?

This obviously could be formatted better and made a bit more readable, but the issue exists nevertheless.

Here's how VS-Code shows the same code:

This still not perfect, but much easier to spot the critical parts. Most notably, parentheses, function parameters and dictionary keys are clearly visible and in a good-enough contrast to the surrounding text.

Therefore I suggest to update the syntax highlighting with more contrasting colors for different semantic and syntactic elements like the above example for the dark and light themes.

Use Case

Easier readability, makes it easier to find and adjust the right spot in larger content-flows.