如何防止样式应用于某些HTML代码段？

Question

我正在为一些可重用的组件创建文档。文档页面将包含该组件的演示以及如何重新创建它的文档。例如，我可能正在演示此HTML：

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

哪个有这个CSS：

.top-level { background: red; }

现在，我想有一个文档，如何创建重新创建它：

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

问题是“代码”标签之间的文本仍然在为div.top级别设置样式。我希望它只显示为代码。我敢肯定我可以覆盖一切，但有人知道更优雅的解决方案吗？

谢谢！

Answer 1

网页上显示的任何代码都应放在<code>元素中。通常，<code>元素的内容以等宽字体显示，就像大多数编程书籍中的代码一样。

但您仍然必须逃避<和>（<，>），浏览器知道您不希望将标记呈现为html

<code>代码之间的正确表达式为<div class="top-level"></div&gt。