Add code preview

[tordans]

I suggest to add a "show code" button next to the preview image. It would make it much easier to understand the details of what is written in words and shown in pictures if you can see the code next to it.

Example:
This image and text talks about some container. But what is the container? Its not visible in the image. Is it a wrapper around "first line" and "second line"? This questions could be easily solved by looking at the code that generated the image.

[roryokane]

As a substitute, you can use your browser’s Web Inspector:

It’s worse than a code sample in that it includes far more information than is relevant. But it’s better than a code sample in that you can inspect each element and see which CSS rules apply to it, and you can edit the CSS and see the changed output to check your understanding of the used properties.

I suppose the ideal would be to include an interactive web inspector in each example that shows only the relevant elements and properties, combining the best of both worlds. But implementing that would probably not be worth the time.