Forum Discussion
Styling a code block to match the course theme
This thread is a possible example of the XY problem, in that what I really want is support for inline code styling. We can do this here in the community (see), but not in a Rise course.
And so it has come to this. I find myself instead wondering if I can create my own paragraph block using the code block. Of course, if I do that, it doesn't inherit any of the existing styles from the course theme. The margins and padding (which are responsive, remember), the fonts and colors, the line spacing... All gone.
So yeah, for this use case alone, maybe not worth it. But I don't know, maybe someone has some advice on how to bring the course theme over to the code block anyway, not for this specific purpose but for more general visual consistency?
3 Replies
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.)
