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

我刚刚学习XHTML的基础知识，并试图使用标记代码和预分别显示代码段或代码块。然后，我如何展示代码的工作示例如何显示一段代码或一段代码，然后显示代码示例？

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

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

2010-10-07 GTD

您将无法单独使用HTML/CSS将此类代码映射到实际的HTML/CSS。你可以尝试使用JavaScript来实现这一点，但你的里程可能会有所不同，因为我以前没有做过这样的事情。

当我使用代码示例+工作样本编写HTML/CSS文章时，我曾使用完全手动方式编写包含示例CSS或样式示例元素的style属性，但我不确定如果你正在寻找这种解决方案。

2010-10-07 02:07:45 BoltClock

我确实想过使用样式属性，但使用内联样式而不是嵌入式或外部样式表。我很好奇，是否有比我更好的书写方式。 – GTD 2010-10-07 02:50:55

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

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

1）有人可能已经写了一个分析器，您可以使用。

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

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

2010-10-07 02:29:22

除了能够控制文本的显示外，是否有任何在每个单独元素周围使用span标签的用途。我假设span标签仅限于文本。这里是一个完整的新手。 – GTD 2010-10-07 02:52:04

@GTD - 跨度标签以内联方式显示（了解显示类型和CSS框模型）。这基本上意味着它们在流程中使用，而不是定义流程。这使得它们非常适合源代码之类的东西。 – 2010-10-07 03:30:59

回答