Thursday, 10 March 2011

HTML Source Code Formatting

When writing web-based articles on programming topics there comes a point when you have to insert a swathe of source code. There are various choices to make here.

You can simply embed the code between <pre> and </pre> tags and be done with it, and in the case of a small code clause or single statement that might do.

But for several lines of code, a whole subroutine or more, then this quickly becomes almost unparsable by the reader. This is particularly so for those who are used to working in a code editor that offers syntax highlighting (something we all take for granted nowadays).

So then we come to the question of how to get your syntax highlighted code from, say Visual Studio, into HTML, still supported a nice array of colours.

There are actually quite a few online web-based source code formatters, and also plug-ins for blog editors, such as Windows Live Writer. I tried a few of them out and settled on the multi-language source formatter at http://manoli.net.

This CSS-based formatter supports C#, Visual Basic, HTML, XML, T-SQL and PowerShell highlighting options and generates HTML that conforms to the HTML 4.01 specification. It also has options for alternating line backgrounds, line numbers and a choice as to whether the style sheet is embedded or expected to be referenced.

I like it, and kudos to the author. It was very helpful to me when writing a lengthy article recently that involved *many* code snippets and listings.

2 comments:

  1. This is a very interesting and informative tutorial. Source code will never be perfect without proper syntax and codes. Anyway, a lengthy article will be a good one when it has good codes and HTML formats.

    seo reseller

    ReplyDelete
  2. Source codes are very useful when submitting articles and other related seo techniques. As an SEO Perth, I always make sure to check correct codes and syntax to prevent errors.

    ReplyDelete