How can I prevent styles from applying to certain HTML snippets?

[Rorschoor]

I'm creating documentation for some reusable components. The documentation page will include a demo of the component along with documentation for how to re-create it. For example, I may be demonstrating this HTML:\[code\]<div class="top-level"> <p>Hello</p></div>\[/code\]Which has this CSS: \[code\].top-level { background: red; }\[/code\]Now, I'd like to have an aside that documents how to create re-create it: \[code\]<aside> <p>All top level content goes into a div with a class of "top-level:</p> <code><div class="top-level"></div></code></aside>\[/code\]The problem is that the text between the "code" tags is still picking up the styling for div.top-level. I'd like it to display simply as code. I'm sure I can just override everything, but is anyone aware of a more elegant solution? Thanks!