Forum Discussion
Styling a code block to match the course theme
OK, I literally just discovered the ability to adjust the size & padding (+ auto-resize). 🤦‍♂️
And the theme (background) colors are easy as well. So that mostly leaves the fonts, font colors, font sizes and line spacing, I suppose. Maybe it is realistic for my use case after all.
Still, though! A lot of effort to go to when it should just be another inline formatting option...
I mostly do vibe coding for the code block and I tell the platform I use what fonts to use and what colors (I usually pull the hex code from whichever color I choose) to use and if there's anything specific theming I want.
Here's a course I did for Pride Month:Really nicely done, CherylStGermain​! The code blocks in your example look great and they don't clash with the course theme.
They do look distinct, though, and I guess I'm wondering how to style a code block in such a way that if it just contained e.g. a header and paragraph, it would look absolutely indistinguishable from the built-in header and paragraph? Because if I can't find a way to recreate all the stylistic touches that make the built-in blocks look the way they do, then to get the consistency I'm looking for, I'd need to use only code blocks, even for stuff that has no need for it otherwise.
(On that note, I maybe spoke too soon above re: the options we do have with code blocks. They don't quite match after all, and they definitely don't behave the same way in a responsive setting.)
