How To Display Code Examples On Your Website
What is the "best" way to show code examples one your site? Well, after doing a lot of research and even more trial and error, I came to the conclusion that using the <pre> tag was the best way to show my code examples. Mainly, because it gave me the ability to give my <pre> a max-height. However, before you place your code on your site, you will need to use a code converter to change all these < > to these < >. This prevents the browser from trying to render your code. Then just copy and paste it into your <pre> and your done!
pre {
display: block;
border: #000 solid 1px;
overflow: auto;
max-height: 340px;
font-size: 12px;
width: 535px;
padding: 5px 10px 10px 10px;
background: #E0E0E0;
margin: 2em 0;
}
If you want your code to wrap, then use the rules below as well. However, you will find, as I did, that a few of these do not validate. Although I recently read that the W3C is planning on including word-wrap: break-word; in CSS-3. So soon we can have our cake and eat it too.
pre {
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Older Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7+ */
word-wrap: break-word; /* IE 5.5+ and Safari */
white-space: pre-wrap; /* css-3 problematic browser support */
}
If you want IE6 to have a max-height as well, then you'll need to feed it an IE expression to simulate max-height.
pre {
height: 340px; /* defaults to this height if JS is turned off */
height: expression( this.scrollHeight > 339 ? "340px" : "auto" );
}
IE expressions don't validate though, so place the above IE specific code in a seperate ie6.css and link to it by placing this in the <head>.
<!--[if IE 6]> <link href="ie6.css" rel="stylesheet" type="text/css" media="screen"> <![endif]-->
