如何顯示一段代碼或一段代碼，然後顯示代碼示例？

我剛剛學習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

回答