Differentiate code blocks

[waciumawanjohi]

The tutorials currently have 3 types of code blocks that are undifferentiated:

• shell commands that users are meant to run
• yaml snippets of files that are not complete
• complete yaml definitions

The shell commands were differentiated by adding $ symbols, but these were included in the copy command. Removing these improved user experience.

This commit

• differentiates yaml from shell commands by giving the yaml blocks custom styling.
• differentiates yaml fragments in the tutorials from complete definitions by giving the complete definitions line numbers

[netlify]

✅ Deploy Preview for elated-stonebraker-105904 ready!

Name	Link
🔨 Latest commit	a431246
🔍 Latest deploy log	https://app.netlify.com/sites/elated-stonebraker-105904/deploys/635c9056fb45ac00098a44ed
😎 Deploy Preview	https://deploy-preview-190--elated-stonebraker-105904.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[waciumawanjohi]

Notes:

1. The tutorials use shell code blocks, while other pages use bash code blocks. This has meant that the two are styled differently.
2. bash and console blocks have the same style. Giving them different style helps to differentiate blocks that are input from blocks that are output (the same purpose of prefixing lines with $)
3. yaml and shell commands should be differentiated, but I am welcome suggestions on which style to apply to which. The list of styles available can be found here. The styles should be distinct enough to differentiate at a glance (which almost certainly entails different background colors).
4. The list of other modifications that can be made to a code block can be read here.

[squeedee]

I think people are more inclined to think of a dark theme as a console window. I would switch the light and dark theming around.

Also the red on a dark background is very hard to read, eg: (on your branch running make serve) http://localhost:1313/docs/v0.5.0/templating/#ytt-1

I'm happy to approve regardless, so long as the red is dealt with.

If you do want to keep $ at the start of console lines, that can be done, there's a no-print style annotation that causes copy to skip them. If you're interested I can help make that happen.

[waciumawanjohi]

If you do want to keep $ at the start of console lines, that can be done, there's a no-print style annotation that causes copy to skip them. If you're interested I can help make that happen.

Yes, let's do that! Happy to pair on it.