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

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所說，您可以手動設置自己的標記樣式，以實現所需的效果。