Showdown (also known as PageDown) is a JavaScript parser for Markdown-formatted text. It’s used on this site to generate a formatted preview of your comment as you type it.

Showdown is library-agnostic, meaning it doesn’t depend on any of the available JavaScript frameworks. To use it, simply include the main script file (Markdown.Converter.js) and, to avoid XSS vulnerabilities, the sanitizer (Markdown.Sanitizer.js) in your HTML document:

<script src="Markdown.Converter.js"></script>
<script src="Markdown.Sanitizer.js"></script>

Of course, you should concatenate your script files together and minify the result, for optimal performance. But you already knew that, right?

Implementing Showdown with plain JavaScript

Unless you’re already including a framework in your project, there’s no need to do so just to implement Showdown — you can just use plain JavaScript:

(function() {
	// When using more than one `textarea` on your page, change the following
	// line to match the one you’re after.
	var textarea = document.getElementsByTagName('textarea')[0];
	var preview = document.createElement('div');
	var convert = new Markdown.getSanitizingConverter().makeHtml;
	// Continue only if the `textarea` is found.
	if (textarea) {
		preview.id = 'preview';
		// Insert the preview `div` after the `textarea`.
		textarea.parentNode.insertBefore(preview, textarea.nextSibling);
		// Instead of `onkeyup`, consider using `oninput` where available.
		// https://mathiasbynens.be/notes/oninput
		textarea.onkeyup = function() {
			preview.innerHTML = convert(eTextarea.value);
		};
		// Trigger the `onkeyup` event.
		textarea.onkeyup.call(eTextarea);
	}
}());

Note: Instead of the keyup event, it would be better to use the input event where available, falling back to keyup.

Using Showdown with jQuery

If you’re using jQuery anyway, this can be rewritten as follows:

$(function() {
	// When using more than one `textarea` on your page, change the following
	// line to match the one you’re after.
	var $textarea = $('textarea');
	var $preview = $('<div id="preview" />').insertAfter($textarea);
	var convert = new Markdown.getSanitizingConverter().makeHtml;

	// Instead of `keyup`, consider using `input` using this plugin: https://mathiasbynens.be/notes/oninput#comment-1
	$textarea.keyup(function() {
		$preview.html(convert($textarea.val()));
	}).trigger('keyup');
});

Demo

I’ve uploaded a demo of the plain JavaScript-version. It works in every A-grade browser, including IE6. The jQuery version has identical functionality and browser support.