Forum Discussion
Styling a code block to match the course theme
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.)
IanJ A few things I've learned. If your interactive code blocks have any sort of background coloring, set the default background of other blocks to the same coloring. I use this for my built-in blocks, so the course flows seamlessly. They should behave the same way in a responsive setting if they are coded correctly. What are you using to code them?