How do I show a snippet of code or a block of code followed by an example of the code?

Question

I am just learning the basics of XHTML and am attempting to use the tag code and pre to display snippets or blocks of code respectively. How do i then show a working example of the code e.g.

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

How do I then display a working example of the code below it?

Answer 1

You won't be able to map that kind of code to actual HTML/CSS using HTML/CSS alone. You could try using JavaScript to achieve this, but your mileage may vary as I haven't done that kind of thing before.

When I wrote HTML/CSS articles with code examples + working samples like you're doing, I used to write style attributes containing the example CSS, or style sample elements by ID, completely manually, but I'm not sure if you're looking for that kind of solution.

Answer 2

StackOverflow uses a simple series of SPAN tags around every single element. The resulting markup is very clean (and even uses the CODE tag), but I'm sure the logic to parse it is not simple.

However, the grammar for these languages is all standardized, so:

1) Someone has probably already written a parser that you can use.

2) If you have/acquire the skill, you can write your own.

Lastly, as BoltClock said, you can style your own markup manually to achieve the desired effect.