In this first part of a series you will learn how to improve the look and readability of code snippets in web pages, thanks to the use of something as simple as a pair of <pre> tags and some CSS styles. This approach does a decent job of styling online code blocks.
Styling Code blocks with CSS: Using pre HTML Tags - Styling code blocks: a starting web page (Page 2 of 4 )
To demonstrate how to make online code blocks more appealing and readable with CSS, the first thing we need to do is define a sample web page that includes at least one code fragment. Based on this requirement, the structure of this initial web page will look as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
</div>
<div id="content">
<h2>Example of a code snippet styled with CSS</h2>
class Autoloader
{
private static $_instance = null;
// get Singleton instance of the autoloader
public static function getInstance()
{
if (self::$_instance === null)
{
self::$_instance = new self;
}
}
// private constructor
private function __construct()
{
spl_autoload_register(array($this, 'autoload'));
}
// prevent cloning instance of the autoloader
private function __clone(){}
// autoload classes
public static function autoload($class)
{
$file = $class . '.php';
if (!file_exists($file))
{
require_once 'ClassNotFoundException.php';
throw new ClassNotFoundException('The file containing the requested class was not found.');
}
require_once $file;
unset($file);
if (!class_exists($class))
{
require_once 'ClassNotFoundException.php';
throw new ClassNotFoundException('The requested class was not found.');
}
}
}
</div>
<div id="footer">
<h2>Footer section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
</div>
</div>
</body>
</html>
As you can see above, this sample web page is comprised of the classic header, main content and footer sections, and each of these has been assigned a basic style for demonstration purposes. You should pay attention, however, to the code fragment included in the main container, which in this case turns out to be the definition of a PHP autoloader class -- but naturally, it could be anything else.
At this point, if you launch your browser and test the page in its current state, the pertinent code snippet should be rendered in the following manner:
That looks pretty ugly and hard to read, right? Since the code fragment has been included in the web page directly as plain text, that’s exactly how the browser treats it. For obvious reasons, visitors to a website that displays code snippets like this will run away as soon as possible in search of more comfortable and friendly places.
Of course, this is a rough introduction to including code fragments in (X)HTML documents that can be largely improved. Fortunately, HTML itself provides a simple, effective method for enhancing the previous example. You may be wondering what it is, right? Well, the language offered from its very beginning the <pre> tag, which can be used for preserving blank spaces and line breaks in code fragments.
Certainly, the use of <pre> tags would make the earlier example look more elegant and much easier to read. Given that, in the following section I’m going to show how to work with this tag in a really simple fashion. Now, click on the link below and keep reading.
Style Sheets 
HTML5 Boilerplate Introduction
