docs: fix highlighting of YAML front matter

[Josh-Cena]

Motivation

See PrismJS/prism#3283

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Check out a page with markdown front matter in code blocks; they are now rendered properly.

Before	After

[netlify]

✔️ [V2]

🔨 Explore the source changes: bff3699

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/61ca9b3bd877d1000907377b

😎 Browse the preview: https://deploy-preview-6206--docusaurus-2.netlify.app

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	83
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🟢 PWA	95

Lighthouse ran on https://deploy-preview-6206--docusaurus-2.netlify.app/

[github-actions]

Size Change: +5.25 kB (+1%)

Total Size: 667 kB

Filename	Size	Change
website/build/assets/js/main.********.js	496 kB	+5.25 kB (+1%)

ℹ️ View Unchanged

Filename	Size
website/.docusaurus/globalData.json	40.1 kB
website/build/assets/css/styles.********.css	102 kB
website/build/index.html	29.6 kB

_{compressed-size-action}

[slorber]

great, thanks 👍

Also noticed that our dark prism theme doesn't highlight yml well, not sure if we should change our theme or fix the existing one

[Josh-Cena]

Ah, I was just wondering if we want to try out vsDark :P If you check out my website (https://joshcena.com/blog/2021/03/09/docusaurus/#building-the-app), it's a very polished theme!

However, that means we would need to update the init templates as well so users don't come and ask "why do I have different themes from the official website"...

[Josh-Cena]

In terms of "fixing the existing one", I think there's little we can do right now. If we forked prism-react-renderer then sure!

[slorber]

Ah, I was just wondering if we want to try out vsDark

I'm not against switching the dark theme, including in the init templates. Is it really better in most cases? Is it popular/well-maintained? It's quite subjective.

In terms of "fixing the existing one", I think there's little we can do right now. If we forked prism-react-renderer then sure!

The themes are just json files with some type/color bindings, so technically it could be possible to extend an existing theme easily. For this specific case, it seems pushing a atrule type to could work.

Note: I'm not sure vsDark would work for yaml considering it doesn't have the atrule type declared. Have you tested this?

In this specific case we mostly want to fix our own doc, not everyone's doc. Not everyone needs yaml syntax highlighting 😅 but at the same time, the darcula theme seems quite less featured compared to the light github one, so maybe we should just change, not sure by which one to replace it though.

Maybe we should create our own official prism theme package, eventually extending the existing ones we use?