Nicer code blocks

[phil-snowplow]

Introduces a more polished code block component. Also did some general css cleanup.

Changes

Code block improvements:

• Added a separate light theme and updates the dark theme to make it less....jarringly purple
• Refined the overall code block style to make it more polished and modern
• Added a badge that shows the language used in the code block
• Made sure to use only existing color variables for consistency

General cleanup:

• Removed unused Tailwind configuration overrides that were no longer needed
• Minor typography improvements, like better spacing between subsequent H2 and H3 headers

Screenshots

Light them

e

Dark theme

[netlify]

✅ Deploy Preview for snowplow-docs ready!

Name	Link
🔨 Latest commit	4410ca9
🔍 Latest deploy log	https://app.netlify.com/projects/snowplow-docs/deploys/692da06edefd3a000823d6d7
😎 Deploy Preview	https://deploy-preview-1510--snowplow-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 18 (🔴 down 1 from production) Accessibility: 91 (no change from production) Best Practices: 100 (🟢 up 8 from production) SEO: 95 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[stanch]

I kind of glossed over the CSS changes, but the result looks great!

[phil-snowplow]

I kind of glossed over the CSS changes, but the result looks great!

TBF the majority of the css diff is auto-linting that I was too lazy to figure out how to revert ¯_(ツ)_/¯

[mscwilson]

I don't love this specific pair of themes (i can live with it), but the code block looks great. The language badge is a very good addition

[phil-snowplow]

I don't love this specific pair of themes (i can live with it), but the code block looks great. The language badge is a very good addition

@mscwilson open to other themes if you have suggestions! I just tried to use one of the existing built-in ones which were somewhat limited.

[mscwilson]

I asked Claude to create themes based on our brand colours. How do we feel about these?

[phil-snowplow]

@mscwilson small nits, but I don't love how (1) it's not consistent across light and dark (e.g. teal vs purple comments, black vs teal variable names) and (2) the teal-on-grey comments is a bit hard to read in the light mode. Let me know if you want me to take a stab at updating that.

[mscwilson]

I've pushed my themes commit, feel free to do whatever with it!

I asked Claude to update it based on your feedback btw, it's more standardised across light/dark now