format code in blog post using html, css and js

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:


Leave a Reply

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

Please reload

Please Wait