So, I found this awesome library called VexTab that allows you to write down musical notations in a simple syntax and generates a HTML5/javascript rendering of the notation. I have some little snippets to allow rendering chords and tabs with/without notations. This will be specific to Jekyll generated sites on Github, you can be much cleverer on your server.

It’s almost too easy but here you go. How to include music notation in your blog – you can ignore raphael.js and chart/chord.js files if you don’t want chord representations. Put these files in your html from vexflow/vextab projects.

You can to get the tabdiv-min.js file from vextab project after compiling. Or, you can browse to the /assets/themes/js directory and copy all the files. Please respect the work of original author. Look at music-post.js file to see how this is done.

After that, you can render anything in the VexTab format including the chords.

So your code

will look like

For more details on what the texts mean, please check the VexTab tutorial.

And, I adapted this from the Vexchord Demo

will look like

Next step is to start blogging about music/theory along with nicer notations!