Formatting Source Code in HTML

If have you seen a number of my tutorials, you would have seen some nicely formatted sample code embedded within the page. Pastebins can host your code there are Javascripts that can also format your code. However, the WordPress service does not allow either of those options to be used. The only way I have been able to do so far has been to convert the code into an HTML code.

Copy and Paste from Eclipse

If you have been developing your code in Eclipse, you can actually copy and paste the code into a rich text editor (such as OpenOffice) and save it in HTML form. This will present the code in the same format as that presented in Eclipse. However, I find that using this method requires some extra editing on the generated HTML code, otherwise the results would looks something like this:

/**


*
Sample class to demonstrate generated HTML formatting.


*


*
@author
kah


*/


public
class
HelloWorld {


public
HelloWorld() {


String
message =
"Hello there!";


System.out.println(message);


}


}

No changes to the original HTML were made here. A fair amount of HTML editing is still required to get the nice format. The HTML was actually generated by saving copying into OpenOffice and then saving it as an HTML file. If you intend to use this method, it may be worth trying out other rich text editors.

Generate the HTML using Vim

My preferred method is actually to simply use Vim to perform the conversion. Vim is available for Linux, Macs and Windows. If you are using the graphical version of Vim, open up your source file and click on syntax -> Convert to HTML. If you running it in a terminal, use the following ex command instead:

:TOhtml

This will split the editor horizontally and add the HTML code at the top.

Vim with generatd HTML

Vim with generatd HTML

Here is a sample of the formatting produced by the conversion:


 1 /**
 2  * Sample class to demonstrate generated HTML formatting.
 3  *
 4  * @author kah
 5  */
 6 public class HelloWorld {
 7     public HelloWorld() {
 8         String message = "Hello there!";
 9         System.out.println(message);
10     }
11 }

The results from this are much better and a lot less editing necessary! Here are a few more tips for using this method:

  1. I have found that when I copy and paste the generated HTML into my blog post, on WordPress, the system would sometimes adds empty lines between each line of code. I removed this extra lines by removing the <br> tags from the HTML code.
  2. If you want to add line numbering to your generated code, you need to turn on numbering first. To turn it on, execute the following ex command:

    :set nu

  3. Finally, the colour scheme used in the generated HTML code will follow the colorscheme that Vim is set to. In other words, you can control the colour scheme used by syntax highlighting by setting Vim to the desired colour scheme before you generate the HTML code. If you are using the graphical version, you can find some of the available colour schemes by going to Edit -> Color Scheme.
Advertisements

One Response to Formatting Source Code in HTML

  1. kahgoh says:

    For those who are wanting to put source code in a post on WordPress, the sourcecode tag will do that for you (for details, visit Posting Source Code.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: