On-line Code Formatting For Blogs – A Review

This is primarily a programming blog so I’m going to be posting code snippets. Of course I want those snippets to be presented nice and pretty like. After the on-line site I used for doing this formatting seemed to disappear I thought I’d better have a scoot-around for a replacement.

Lets be clear, I want it to look pretty, by which I mean make it easy to see to identify the various elements within code via colour coding. I’m not looking for a particular colour scheme, just best code readability. I also use C++, C#, PHP, Javascript, CSS and HTML and tinker with a lot more besides, so looking for something to handle these. Oh, and I just want to cut and paste into a WordPress blog, which kinda rules out any thoughts of using additional CSS files (aka doing it properly).

Just want to skip the waffle and go straight for the conclusion ? Then follow this link.

hilite.me

hilite.me

Now this is good ! I thought I pretty much knew every programming language (even if “knew” only means “knew how to spell it”) but I certainly hadn’t heard of a lot of the languages this page provides.

A number of colour styles are available, so if you prefer lots of colour on a black background then there’s an option for you. I found the “colourful” option worked for me.

You can also supply some CSS to put a nice border around your code block – a nice touch.

The page itself is well thought out / a lucky accident :-) You can do everything without having to scroll the window which makes life just that little bit easier if you’ve a number of code blocks to convert. The flip side however is you paste your code into a small box, not an issue if you are converting code blocks as-is but if you need to tweak the code first then it’s gonna be fiddly. Of course, a bigger box would mean the page would loose that handy no-scrolling-needed, its swings and roundabouts.

Simply clicking in the ‘HTML’ window automatically selects the text ready for copying to your clipboard.

CodeHTMLer

No screenshot I’m afraid; using the same code snippet as I used in the previous hilite.me test, the resulting page was eight times taller than my screen !

Selecting the resulting HTML code is fiddly. After scolling down to the generated HTML – 5 pages of scrolling in my test case – you then have to manually select it which is doubly fiddly with anything but the shortest of code snippets. There is a “copy to clipboard” but that only works in IE – I can’t believe there is any coder, particularly a web developer, who would be using IE !

Of my required formats, only C#, C++ and javascript is directly supported.

There are no colour options and the C# formatting didn’t really seem to do that much.

The biggest problem however is that the generated HTML isn’t “contained”, that is, it flows outside of its designated area. It did that on their own web page and also did that when pasted into my blog page. Fail.

Overflowing text. Oh dear :(

Overflowig text. Oh dear :(

Manoli.Net

manoli

Only a limited set of language options and cutting an pasting the resulting HTML into a WordPress blog lost all the formatting ! I’m guessing that HTML5 doesn’t allow defining style classes in the body ?

If I were doing my own website then this would be better than hilite.me as it would give me the CSS to import into my project, but for WordPress duty it’s not for me.

Format My C# Code

Format My C# Code

OK, so it is c# only. But id does work and the output is neat, with a simple border and a preceding “Code” label. Quite neat. Option to embed the CSS or keep it seperate, so useful for both dumping straight into a blog as well as doing a proper website CSS.

 Quick Highlighter

Screenshot of Quick Highlighter

Damn annoying site due to a stupid advertising box that keeps on bobbing up and down at the bottom of the screen. OK, its a free resource, they have to pay for it somehow, but going so far as to be annoying isn’t the way to go.

But lets persevere.All the languages are there as is line numbering. However it does not contain the generated code in a scrollable ,div> so, like most other sites, when you paste the result into a blog you get line wrapping which makes code difficult to follow. Of course, I could hack in some extra code y remember the point of my exercise is to quickly dump a code snippet into a blog.

Unfortunately there is a bug in the generated html (or maybe a clash with WordPress ? I don’t know). By default, they’ve tried to be smart and make every 5th line number bold, a nice detail but it seems to have the effect of corrupting every fifth line when inserted into WordPress – the preview on their site is fine. Changing the line numbering option from “fancy” to “normal” fixes the issue.

One neat idea unique I hadn’t actually noticed before is a little option described as “strict”. The idea is for example with PHP then limit highlighting to only the block between the opening <?php and closing ?>. Neat idea! Only, there is very little highlighting. For a start, variables are left plain, I expect things like $myVariable to be differentiated from other text. I was going to put a screenshot here but the bloody site stuffed a ruddy advert in the middle of the preview. Wait a moment ! On re-checking hilite.me, it does this script / strict thing automatically !

 ToHTML

tohtml

A nice and simple interface that just gets on with the job. The code type dropdown is a bit awkward; it isn’t in alphabetical and just to confuse matters it divides languages into groups. But that aside it does the job in that it creates html code that can be posted straight into a blog and uses scrollbars instead of wrapping lines.

It only seems to apply light formatting, not helped by the choice of one of the highlight colours being technically red but so dark its only if you zoom right in you really notice it isn’t black – the screenshot below looks much better than it did on my LCD screen. It worked well enough for PHP, CSS, and HTML, not sure about javascript but definately lacking when it came to C#.

There’s no option to add line numbers, which is awkward when posting a code snippet for subsequent discussion.

C# conversion using toHTML

C# conversion using toHTML

Same C# code but using hilite.me

Same C# code but using hilite.me

 

CONCLUSION

I thought there’d be a number of sites that were good and maybe differentiated by just a few features, making for a difficult job. But no, hilite.me is the best by a country mile ! Single page, simple, fast, very good highlighting (not too much, not to little), generates code that bolts straight into a WordPress blog and provides scrollbars instead of wrapping long lines. No competition.

But websites come and go, so if the worst happens and hilite.me were to vanish then I guess I’d fall back to toHTML for PHP, CSS and HTML, but for C# I’d have to go with Format My C# Code.

 

 

Leave a Reply