It is very easy to style code blocks enclosed in pre or code tags. Have you seen this zebra effect, odd and even? This is a neat css trick to style code without use of javascript. It can be done purely in CSS It looks like this and here is the code. Just change background colors below. The key here is line-height. Play around with it to get matching row sizes.
pre {
padding:20px;
display:block;
width:80%;
color:#333;
margin:0 auto;
font:normal 12px Monaco,courier,monospace;
background: #fff;
background-image: -webkit-linear-gradient(#cbe9fa 50%, #fff 50%);
background-image: -moz-linear-gradient(#cbe9fa 50%, #fff 50%);
background-image: -ms-linear-gradient(#cbe9fa 50%, #fff 50%);
background-image: -o-linear-gradient(#cbe9fa 50%, #fff 50%);
background-image: linear-gradient(#cbe9fa 50%, #fff 50%);
border:1px solid rgba(0,0,0,0.1);
background-position: 0 0;
line-height:20px;
background-repeat: repeat;
background-size: 40px 40px;
overflow:auto;
white-space:pre-wrap;
word-wrap: break-word;
}
