dinsdag 20 oktober 2009

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 <pre> or <code> 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"></script>
And then add the prettyPrint() function to the onload event of the body tag like this:
<body onload="prettyPrint();">

Geen opmerkingen:

Een reactie plaatsen