Markdown in the browser, without additional tools

Today I ran into a typical documentation problem.

  • Organization uses mainly Word, but I don't use word.
  • I want a solution that, while the documents are checked into subversion, is navigable in the browser.
  • So, HTML is probably good, but I'm not going to write HTML by hand.
  • I don't want any server-side code, and I also don't want to check in 'compiled' HTML.

So, I wanted to write Markdown, and needed some way of processing it in the browser. Enter: Showdown.

Showdown is a Markdown processor, written in Javascript. I ended up with documents that look roughly like this,

<div id="content">
<!-- This div contains all content in Markdown. -->

Showdown is

- legend...
- ...wait for it...
- ...dary!

<!-- End of div with markdown -->
</div>

 <!-- This script translates markdown to readable HTML -->
<script src="https://raw.github.com/coreyti/showdown/master/compressed/showdown.js" ></script>
<script>
var converter = new Showdown.converter();
var content = document.getElementById('content');
console.log(content);
content.innerHTML = converter.makeHtml(content.innerHTML);
</script>

which gives me a page that says the following,

Showdown is

  • legend...
  • ...wait for it...
  • ...dary!

Isn't that an awesomely simple solution? Just type Markdown in the predefined div, save, commit, and enjoy.

Oh yeah, subversion

When using this solution in Subversion, remember to set the SVN mimetype to text/html, so the file can be viewed in the browser. You can do this using

svn propedit svn:mime-type <file>