A minor annoyance with GitHub: When you’re writing comments and you want to preview them, you have to hit a separate preview button and wait for the server to generate a formatted preview. Having to manually switch between writing and previewing is not very optimal, so I decided to do something about it.

Enter Live Markdown Preview for GitHub, a userscript that adds a live preview box right underneath your comment:

If you’d like to have it yourself, check out the GitHub repository for installation instructions. I’ve tested it in Chrome and Firefox, but it should likely work in other browsers that support userscripts as well. At the time of writing (v0.1.2) it’s still missing some features, but even in its current form it should prove rather helpful with its instant feedback.

The script itself is written in LiveScript, a fantastic flavor of CoffeeScript. The script makes heavy use of marked and highlight.js to parse and format the text. The icon comes from Elusive, and was cut with the fantastic Fontello.

A slightly amusing hack: I wanted the Live Preview button to have a nice tooltip like the Zen Mode button has. I figured the easiest way would be to inject an inline script to the page with the following code in it:

$('.js-toggle-live-preview').tipsy({gravity: 'e'});

Unfortunately, GitHub has a Content Security Policy for script-src in place, which prevents inline <script> elemets from running. As a workaround, I made a gist and embedded a script that pointed to its raw version, and voilà, my script was running and the Live Preview button had a pretty tooltip!

As far as weekend projects go, this one was quite successful. Enjoy the script!

Discuss this post on Hacker News.