Feb 13, 2010

Blog - Syntax Highlight, Code Formatting - Part2

So in Part 1, I described how to spruce up code in a blog. It worked well but had a few shortcomings. Largest of which, it didn't automatically wrap lines. So if your code was wider than your blog template, it would get cut off. Another problem was, you needed to find a place to host the javascript and css files.

Since then, I've been pointed to the this blog that shows easy syntax highlighting for blogger. This has several strengths over Google's version that I described. In addition to solving the two problems above, it also offers a great "copy" feature: after hovering over a code section, links appear allowing viewers to copy everything, view the code separately, or even print it!

Here's an example of code highlighted the new way:
<div class="sidebar">
<a href="http://super_long_url_that_makes_this_line_long" target="_blank" name="someName" id="someId">click here for awesome</a>
The only downside I see is that this version takes a long time to load because it's using javascript files, css files AND a Flash SWF file. I may end up hosting all of these locally (on google's server) to see if that improves speed. Also, it may impact the iphone/ipad (non-flash) view of the site. I'll have to test what happens when a user doesn't have flash (or maybe even javascript) enabled.

All in all, I will keep the previous blog the way it was but, going forward, I'm using the awesome highlighting, instead of Google's! As far as formatting is concerned, I'm still testing different external blog tools. The next part will cover the one I chose and why.

No comments:

Post a Comment