Since I will be frequently supplying code examples, I initially devised a way to handle code indentation through css.  My first attempt works, but was pretty sad, not to mention a space waster. And anyone who develops web pages knows the important of css as opposed to styling in an html document. First, it separates content from presentation, and it also reduces the download size to your end user. And smaller file sizes means your content will load in their browsers more quickly, taking away the variable of server load, of course.

So here is my first attempt:

Now if you copy the above examples into a stylesheet file name style.css and code.html you will see that the html is rendered with a perfectly formatted code example. However, looking at the example it certainly takes a lot of selectors to handle nesting of lines of code. In some complex code examples further indenting selectors would beed to be defined which is not sustainable.

As a software engineer, I wanted to simplify this greatly. Here is the simplified version. Note that the simplicity comes from the css itself, not necessarily from the markup. It completely alleviates the need to defined multiple nesting levels in your stylesheet.

At some point it’d be nice to write a quick C# program to generate the indented text. Even with the simpler example, it’s still quite the pain to get the formatting just right for display in a div area for copying the examples.

I hope this has helped anyone who needs to embed formatted code examples in their web pages