Sample App: Sample code errors are hard to read

[marcelwgn]

Describe the bug

A clear and concise description of what the bug is.

Errors in the XAML Sample are hard to read as the background-red does not work well with text:

• Is this bug a regression in the toolkit? If so, what toolkit version did you last see it work:

Steps to Reproduce

• Can this be reproduced in the Sample App? (Either in a sample as-is or with new XAML pasted in the editor.) If so, please provide custom XAML or steps to reproduce. If not, let us know why it can't be reproduced (e.g. more complex setup, environment, dependencies, etc...)

Steps to reproduce the behavior:

1. Open Sample App
2. Enter faulty XAML

Expected behavior

Text should be easy to read.

Screenshots

If applicable, add screenshots to help explain your problem.

Environment

NuGet Package(s): 

Package Version(s): 

Windows 10 Build Number:
- [ ] Fall Creators Update (16299)
- [ ] April 2018 Update (17134)
- [ ] October 2018 Update (17763)
- [ ] May 2019 Update (18362)
- [ ] May 2020 Update (19041)
- [x] Insider Build (build number: 20236)

App min and target version:
- [ ] Fall Creators Update (16299)
- [ ] April 2018 Update (17134)
- [ ] October 2018 Update (17763)
- [ ] May 2019 Update (18362)
- [ ] May 2020 Update (19041)
- [ ] Insider Build (xxxxx)

Device form factor:
- [x] Desktop
- [ ] Xbox
- [ ] Surface Hub
- [ ] IoT

Visual Studio 
- [ ] 2017 (version: )
- [ ] 2019 (version: ) 
- [ ] 2019 Preview (version: )

Additional context

Add any other context about the problem here.

[ghost]

Hello chingucoding, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[Kyaa-dost]

@chingucoding Thanks for highlighting the issue. Are you going to be creating a PR for this?

[marcelwgn]

Unfortunately, I don't have enough knowledge of the markdown renderer, so I'll gladly leave this issue to someone who is familiar with that.

[Kyaa-dost]

@chingucoding No worries. Will see if any other developers can pick this up.

[michael-hawker]

This color is defined by the lines of code here:

https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/a47305cbaea5cfeb8ecdfd8c74e2570b86ed26e2/Microsoft.Toolkit.Uwp.SampleApp/Controls/XamlCodeEditor.xaml.cs#L124-L127

If I remember the contrast may be alright on light theme, but we probably need to make this theme aware using our ThemeListener.