Blogging tips: Including source code in your website

If you're a blogger that want to write source code, maybe you have some problems to include it into your blog due to the tags, escape chars, the highlighting and more problems.

Two common and great solutions are SyntaxHighlighter and Code Prettifier. Both give your source code the syntax highlighting (depending on the selected language), line numbers, a well done layout and a lot of colors.
The only "problem" that I can find with those utils is that both are javascript and css files that you must download and load in the body of your webpage and host in your server (although SyntaxHighligther offers a hosting service). The problem of adding external CSS files to your website is that if you don't have access to the server, such as in Blogger, you maybe will need to do some dirty workarounds like pasting the full CSS into the template (see how to include SyntaxHighlighter to Blogger).

1.   // Source code SyntaxHighlighter like
2. private static long convertMilliSecondsToDaysViaMoreExplanatoryMagicNumbers(final long numberMilliseconds)  
3. {  
4.    // 60 seconds in minute, 60 minutes in hour, 24 hours in day, and  
5.    // one thousand milliseconds in a second  
6.    return numberMilliseconds / (60 * 60 * 24 * 1000);  
7. }  

This is wonderful if you write a lot of lines of code, but what if you need to write only a few number of code lines? What if you don't want an overloaded layout? Does it worth the effort to download the files, host them (there are several files) and copy the entire CSS into your blogger's layout?

HTML gives you the <pre/> and <code/> tags, but them really only escape and change the font. The solution that I've found in devcha is to change the <pre/> style to have a backgrounded piece of code. It doesn't have colored keywords, but it's more readable.

<pre style="background-color:#eeeeee; border-color:rgb(153, 153, 153); border-style:dashed; border-width:1px; margin:0px; overflow:auto; padding:5px; width:95%;">

YOUR CODE GOES HERE

</pre>

Of course, set the <pre/> attributes as you like. Remember, that if you're inserting this in Blogger, you should write it in the HTML edition mode.