Using Ordered Lists to Style Code Blocks with CSS
(Page 1 of 4 )
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.
As with many other things that comprise the vast terrain of professional web design, there are different approaches one can take to give code blocks included in web pages a more polished and readable look. From using server-side syntax formatters, to appealing to the functionality of JavaScript-based highlighters, there are numerous options that permit you to improve the visual presentation of online code snippets.
While the aforementioned solutions can best be implemented where it’s necessary to display code fragments that span a great variety of languages and technologies, a simple combination of CSS styles and some common HTML tags can produce remarkable results as well. This is especially true when it comes to preserving only the format of the code blocks, and highlighting their syntax is optional.
To demonstrate how simple it is to enhance the look and readability of the blocks in question with style sheets, in previous part of this series I developed a bunch of easy-to-follow examples. They used some common CSS properties, along with the tandem comprised of the <pre> and <code> HTML tags, to preserve the format and appearance of a sample PHP snippet while leaving its semantic meaning untouched. By far, this method is the most used nowadays due to its flat learning curve and easy implementation.
As I said a moment ago, however, the combination of <pre> and <code> elements isn’t the only way to polish the visual presentation of online code blocks. There are a few other approaches that don’t use <pre> tags and can produce even better results. For the sake of brevity, in this case I plan to cover only one of those alternative methods. It relies on ordered lists to enumerate lines in code fragments, similar to the typical feature found in code editors and IDEs.
So, in the lines to come I’ll be showing you how to use ordered HTML lists to turn a boring and unreadable web page code fragment into an engaging and elegant code container, worth looking at over and over again.
Ready to learn the fine details of this “make up” process? Then jump ahead and start reading!
Next: Review: using pre and code tags with online code blocks >>
More Style Sheets Articles
More By Alejandro Gervasio
