Decorating Line Numbers in Code Blocks Styled with CSS

Improving the visual presentation of code blocks on web pages is a process that can be tackled via different approaches. These may range from using server-side applications, usually written in PHP, Python or Ruby, to working directly with JavaScript-based syntax highlighters. However, it’s possible to get similar results by means of a simple combination of CSS and a few common HTML tags, without having to deal with the complexities of a full-featured code formatter/highlighter program.

To demonstrate the veracity of my statement, in previous chapters of this series I showed how to provide online code snippets with an elegant and polished look, first by using a couple of <pre> and <code> elements, and then with something as trivial as an ordered list. This last method is particularly useful, since it permits you to automatically generate line numbers while maintaining the semantic meaning of the snippet intact.

What’s more, in the last installment I started illustrating how to decorate a sample PHP fragment included in a web page by using an ordered list along with some <code> tags. I have to say, however, that in its current state, this example looks somewhat rough and unfinished. It's only capable of displaying the aforementioned line numbers and highlighting code lines, which offers nothing particularly interesting. Obviously, this implies that it’s necessary to introduce some additional enhancements that make the PHP snippet look even more attractive and stylish.

With that premise in mind, in the lines to come I’ll be adding a tiled background image to the pertinent code fragment. This image will create a neat gutter and an engaging zebra effect. This will be a straightforward process, take my word for it. So click on the link below to learn a few more useful things about styling code blocks with CSS!