docs: Syntax highlighting in editor could be improved

[atscott]

Syntax highlighting in the editor could/should be improved for Angular templates

Places where highlighting could be applied better:

• interpolations / expressions
• attribute and event bindings
• the new control flow/block syntaxes

Here is an image of the current editor in the playground where you can see that none of the above get any special treatment:

[niklas-wortmann]

Just putting this out here again. Shiki has support for all the things above as you can see in the screenshot below. It also uses the textmate grammar files directly from here https://github.com/angular/vscode-ng-language-service/tree/main/syntaxes, so it will always be up to date in case we get control-flow/block syntax v2 (just kidding :D)

As I stated in the referenced ticket, I did migrate a couple websites within JetBrains over to Shiki so I'd be more than happy to help out here, if interested

[surajchopra1234]

• Angular.dev docs have too low contrast between the text and the background.
• The background is pitch black, which is very irritating to the eyes.
• The links are not visually distinct enough to be easily recognizable as clickable elements.
• The blue color isn't bright enough to differentiate between itself and the pink in the code block.

[mgechev]

Updated to P1. It's not a regression compared to angular.io, but creates the impression that Angular templates are just plain strings without any text editor/IDE support.