SanSite

If you are writing technical blogs, it is apparent you would need to post some source code of some language at sometime or the other. Posting code with no syntax coloring works fine but coloring makes code goes easy on eyes and to understand it faster.

The tool of choice I prefer for blogging is Syntax Highlighter. It is completely client side so server won’t be burden with extra work of syntax highlighting the code and it looks pretty on page.

Many blogging engines provides their own set of tags which enables to do syntax highlighting. If you are hosting a blog in Wordress.com you can use the the sourcecode tag.

If you are hosting your own blog using WordPress engine, you are not luck as it doesn’t support sourcecode tag. Not to worry, there are some great options to highlight your code. Out of many available options, I prefer Syntax Highlighter Plus wordpress plugin. It works out of the box and you can just paste the complete code as is without worry about converting the < and > characters.

However one issue I had with it was the width of the code window it renders. By default it uses around 530 pixes, which may be little small if you have wide width blog layout as mine. Solution is pretty simple. After installing the plugin, open

wp-content/plugins/syntaxhighlighter-plus/shlfiles/SyntaxHighlighter.css
</pre> and edit the 
<pre>.dp-highlighter

class with desired code width. The code window used in this site uses 750px.

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}

For friend of mine I created a events map based on the google maps API (original idea credit goes to Virender Ajmani), which takes a data file with set of events and shows the events details on map as slide show. For ex., here is event map created with my major lifetime events.

Here is the direct url for the html and js file.   I have completely separated the data elements from the scripting elements so you can use the event map out of box with your own data file without any modifications to html/js file (except changing the Google Map API Key). The event map accepts following parameters.

• datafile => the url to the data file containing all events
• ap => 1 or 0 indicating if events should start autoplay or not
• h => height of the map
• w => width of the map

Data file itself can be very easily constructed.  Here is the data file with couple of events.

<?xml version='1.0' standalone='yes'?>
<events>
	<defaultthumbnail>http://www.brsanthu.com/map/santhosh.jpg</defaultthumbnail>
	<defaultzoom>7</defaultzoom>
	<event>
		<name>Born in Doddachellur, Karnataka</name>
		<place>Chitradurga, Karnataka, India</place>
		<desc><![CDATA[Bon on 14th Oct to Rudramuniyappa and Sowbhagyamma]]></desc>
	</event>
	<event>
		<name>High school in Malladihalli</name>
		<place>Holalkere, Karnataka, India</place>
		<desc><![CDATA[Joined for High school at Malladi halli swami ashram]]></desc>
	</event>
	<event>
		<name>Pre-University education at Chitradurga circa Jun, 1991</name>
		<place>Chitradurga, Karnataka, India</place>
		<desc><![CDATA[Joined for PUC Education at Govt Sc College in Chitradurga, Karnataka]]></desc>
	</event>
</events>

The events map API will automatically Geocode the address specified in the place tag and positions the marker.  Optionally you can also specify exact lat/lon if you know it instead of place tag as follows.

	<event>
		<name>Born in Doddachellur, Karnataka</name>
		<place>Chitradurga, Karnataka, India</place>
		<lat>14.230774</lat>
		<lon>76.400299</lon>
		<desc><![CDATA[Bon on 14th Oct to Rudramuniyappa and Sowbhagyamma]]></desc>
	</event>

Here is the zip file containing all the source.  Let me know if you need something.