As I was stepping into the tech blog posting arena I had a major concern: How to deal with posting source code.

Here are the solutions that I came up with:

A simple solution is to surround your source code in a PRE tag. (PRE tag defined.)

PRE Tag source code:

<pre>
package com.eui.sourcecodeblog
{
 public class Foo
 {
  public function Foo() {
   super();
  }

 }
}
</pre>

This solution isn’t bad for starters. In most browers you should see the text in a mono-spaced font as well as pre-formatting with regards to spaces.

In addition to using PRE we can wrap our PRE elements in a DIV tag. Setting the width and overflow styles of the DIV will prodcue a box that’s friendly to your particular blog template.

PRE tag with DIV tag source code:

<div style="overflow: scroll; width: 350px;">
<pre>
package com.eui.sourcecodeblog
{
 public class Foo
 {
  public function Foo() {
   super();
  }

 }
}
</pre>
</div>

PRE tag with DIV tag example:

package com.eui.sourcecodeblog
{
 public class Foo
 {
  public function Foo() {
   super();
  }

 }
}

This is actually a pretty good outcome with little HTML coding. You could even move the style properties to a CSS class defined in your blog template code. This would make coding the DIV tag a bit easier. Pretty good, but still not quite as satisfing as my final solution for posting source code.

Spacing isn’t the only thing that makes source code easy to read. For me, the text colorization is essential to reading plesant looking source code. To achieve colorization there’s just one more step. I chooe to use a converter found at: http://www.riarock.com/as2html/as2html.htm.

Using the AS2HTML Color Converter:

   1. Paste your source code into the text box
   2. Select "Generate old (non-valid) HTML using font color tags"
   2. Click convert
   3. View source on the generated page
   4. Copy the genereated HTML code inside the BODY tag

It should look something like this:

package com<B><FONT COLOR="#660099">.</FONT></B>eui<B><FONT COLOR="#660099">.</FONT></B>sourcecodeblog<B><FONT COLOR="#660099">

{</FONT></B><FONT COLOR="#FF0000">
   public class</FONT> Foo<B><FONT COLOR="#660099">
   {</FONT></B><FONT COLOR="#FF0000">
      public function</FONT> Foo<B><FONT COLOR="#660099">() {</FONT></B><FONT COLOR="#0000FF">
         super</FONT><B><FONT COLOR="#660099">();
      }

   }
}</FONT></B></PRE>

The final outcome (including our div tag from the previous example wtih a few added style properties):

package com.eui.sourcecodeblog {

public class Foo {
    public function Foo() {
       super();
    }
}
}

If you’re feeling adventurous, it’s not too difficult to re-style the coloring done by AS2HTML. Just skip step 2 above and then inspect the generated HTML. You’ll need to add the CSS classes in the head of this document to your blog site’s template.