如何显示一段代码或一段代码，然后显示示例代码？

Question

我只是在学习XHTML的基础知识，并试图使用标记代码并pre分别显示代码片段或代码块。 然后如何显示代码的工作示例，例如

<p>Code Sample</p>
<code>
#p1 {font-family: Arial;}
</code>

然后，如何在下面显示代码的工作示例？

Answer 1

您将无法仅使用HTML / CSS将这种代码映射到实际的HTML / CSS。 您可以尝试使用JavaScript来实现这一目标，但是由于我之前没有做过这种事情，因此您的工作量可能会有所不同。

当我用类似的代码示例和工作示例编写HTML / CSS文章时，我曾经是完全手动编写包含示例CSS的style属性，或按ID编写样式示例元素的style属性，但我不确定您是否寻找那种解决方案。

Answer 2

StackOverflow在每个元素周围使用一系列简单的SPAN标签。 生成的标记非常干净（甚至使用CODE标记），但是我确信解析它的逻辑并不简单。

但是，这些语言的语法都是标准化的，因此：

1）可能有人已经编写了可以使用的解析器。

2）如果您具有/掌握该技能，则可以编写自己的技能。

最后，正如BoltClock所说，您可以手动设置自己的标记样式，以实现所需的效果。