STYLE SHEETS

Using Ordered Lists to Style Code Blocks with CSS

In this fourth part of a seven-part series on styling code blocks with CSS, I explain how to enhance the visual presentation of code blocks on web pages by using something as simple as an ordered HTML list. This approach permits you to automatically generate line numbers, which makes code fragments much more readable.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

March 31, 2010

TABLE OF CONTENTS:

To be frank, improving (at least at a basic level) the visual presentation of the previous PHP snippet is only a matter of styling its containing HTML list and the wrapping <code> elements. In consonance with that idea, below I included the same sample web page that you saw before, but this time it includes some additional CSS styles. Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Styling code snippets with CSS (uses an ordered HTML list)</title>

body {

padding: 0;

margin: 0;

background: #000;

font: 0.9em Arial, Helvetica, sans-serif;

color: #000;

}

#wrapper {

width: 960px;

margin: 0 auto;

background: #c0c0ff;

}

#header, #content, #footer {

padding: 20px;

}

p {

margin-bottom: 20px;

}

/* ordered list for code blocks */

ol.codeblock {

list-style-type: decimal;

width: 600px;

padding: 20px 0 20px 40px;

margin: 0;

background: #fff;

font: bold 12px "Courier New", Arial, Helvetica, sans-serif;

line-height: 20px;

border: 1px solid #969696;

}

/* <code> element in code blocks */

ol.codeblock li code {

padding-left: 10px;

}

</style>

</head>

<body>

<h1>Styling code snippets with CSS</h1>

<h2>Header 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>

<h2>Example of a code snippet styled with CSS</h2>

<li><code>class Autoloader</code></li>

<li><code>private static $_instance = null;</code></li>

<li><code>// get Singleton instance of the autoloader</code></li>

<li><code>public static function getInstance()</code></li>

<li><code>if (self::$_instance === null)</code></li>

<li><code>self::$_instance = new self;</code></li>

<li><code>return self::$_instance;</code></li>

<li><code>// private constructor</code></li>

<li><code>private function __construct()</code></li>

<li><code>spl_autoload_register(array($this, 'autoload'));</code></li>

<li><code>// prevent cloning instance of the autoloader</code></li>

<li><code>private function __clone(){}</code></li>

<li><code>// autoload classes</code></li>

<li><code>public static function autoload($class)</code></li>

<li><code>$file = $class . '.php';</code></li>

<li><code>if (!file_exists($file))</code></li>

<li><code>require_once 'ClassNotFoundException.php';</code></li>

<li><code>throw new ClassNotFoundException('The file containing the requested class was not found.');</code></li>

<li><code>require_once $file;</code></li>

<li><code>unset($file);</code></li>

<li><code>if (!class_exists($class))</code></li>

<li><code>require_once 'ClassNotFoundException.php';</code></li>

<li><code>throw new ClassNotFoundException('The requested class was not found.');</code></li>

</ol>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

Done. As you can see above, the list containing the PHP code has now been assigned some simple styles, including a white background color, a readable typeface family and a slim border. In addition, each <code> element has been applied a padding of 10px, but naturally this can be customized at will. As usual, a picture is worth a thousand words, so take a look at the following one, which shows the final result of this styling process:

At this point, you’ll have to agree with me that the previous PHP fragment is starting to look a little more attractive. Not like something that should be used in production environments, I know, but keep in mind that this is a work in progress and a few things still need to be done, such as assigning a different color to line numbers, creating a zebra background and even specifying a proper indentation to each line of code.

That’s a lot of work that will be done in upcoming parts of the series. For the moment, feel free to take a break and read the summary below.

Final thoughts

In this fourth installment of the series, I discussed how to enhance the visual presentation of code blocks on web pages by using something as simple as an ordered HTML list. As you saw for yourself, this approach permits you to generate line numbers automatically, which makes code fragments much more readable.

However, it’s far to say that the styling process is still in an initial and rudimentary stage. There are other improvements that need to be implemented, such as the inclusion of a gutter and the assignment of different colors to line numbers. All of these handy features will be covered in the next tutorial, so I recommend you don’t miss it!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.