如何显示代码片段或代码块后跟代码示例？

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编写样式元素，完全手动，但我'我不确定你是否在寻找那种解决方案。

Answer 2

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

但是，这些语言的语法都是标准化的，所以：

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

2）如果你拥有/获得技能，你可以自己编写。

最后，正如BoltClock所说，您可以手动设置自己的标记样式以达到预期的效果。