How to show code examples in Blogger or HTML

When you want to show code examples on a webpage - you'd be suprised how much you need to dig to find a good solution. You have the default ways of using <pre> and <code> . Neither of which generate very pretty code at all. Of course you can write your own stylesheets or borrow/steal from other pages, but here is a great canned solution you can reuse without any guilt. Its called SyntaxHighlighter from Google. It's javascript and a stylesheet that formats several languages all very purdy with only a single tag! Another blogger has already written up a guide on how to to use it, so rather then re-create the wheel - here's a link Note, there is a slight problem in his example in that the paths he uses aren't very consistent, and don't even match what he uses on his page. A working example is probably in order then.. and it gives a chance to demo the tool! Here is the example from Fahd's blog as he's actually using it <!-- SYNTAX HIGHLIGHTER --> <link href="http://www.geocities.com/fahdshariff/SyntaxHighlighter/Styles/SyntaxHighlighter.css" rel="stylesheet" type="text/css"></link> <script language="javascript" src="http://www.geocities.com/fahdshariff/SyntaxHighlighter/Scripts/shCore.js"></script> <script language="javascript" src="http://www.geocities.com/fahdshariff/SyntaxHighlighter/Scripts/shBrushJava.js"></script> <script language="javascript" src="http://www.geocities.com/fahdshariff/SyntaxHighlighter/Scripts/shBrushXml.js"></script> <script language="javascript" src="http://www.geocities.com/fahdshariff/SyntaxHighlighter/Scripts/shBrushSql.js"></script> <script language="javascript"> dp.SyntaxHighlighter.ClipboardSwf = 'http://www.geocities.com/fahdshariff/SyntaxHighlighter/Scripts/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script> <!-- END SYNTAX HIGHLIGHTER --> Pretty slick eh? Look in the comments of Fahd's post and you'll find someone has even hosted the files for you already! Just link to those files in the html above and put in your html page and you're all set