Question

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:

<div class="top-level">
    <p>Hello</p>
</div>

Which has this CSS:

.top-level { background: red; }

Now, I’d like to have an aside that documents how to create re-create it:

<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>

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!

Answer 1

Any code to appear on a Web page should be placed inside a <code> element. Usually the content of the <code> element is presented in a monospaced font, just like the code in most programming books.

But you must still escape your < and > (<,>), that the browser knows that you don’t want the tags rendered out as html.

The correct expression between your <code> tags would be <div class="top-level"></div&gt.