I have several code samples on this blog and I needed a way to display these with some kind of code highlighting. First queries returned me some blogs that only formatted the
or tag with css:
pre {
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000;
}
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;
}
.clear {
clear:both;
overflow:hidden;
}
And next I only needed to find a way to highlight code... Google has a code prettify project for that. It uses css as well but also javascripting. Read the instructions here. You need to add a reference in the header to the script and stylesheet like this:
<link href="prettify.css" type="text/css"
rel="stylesheet" />
<script type="text/javascript"
src="prettify.js">
And then add the prettyPrint() function to the onload event of the body tag like this: