To give your code blocks prettier styling, with every other row of code being highlighted differently, use the following snippet:

pre{
background-color: #fff;
line-height: 1.5em;
font-size: 12px;
background-image: -webkit-linear-gradient(#eee 1.5em, #ddd 1.5em);
background-image: -moz-linear-gradient(#eee 1.5em, #ddd 1.5em);
background-size: 100% 3em;
}​

It simply creates a gradient with two rows, each matching the line height, giving a nice alternating row like effect without any extra markup. It’s also what I’m using here on Rockstars.

I like this well enough I may roll it into the base LESS file for my PSD to HTML projects, but I need to do a little more testing in older versions of Firefox.

Neat right?

Leave a Reply

Your email address will not be published. Required fields are marked *