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],
      preview = document.createElement('div'),
      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: http://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'),
      $preview = $('<div id="preview" />').insertAfter($textarea),
      convert = new Markdown.getSanitizingConverter().makeHtml;

  // instead of `keyup`, consider using `input` using this plugin: http://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.

_Emphasize_ some terms. Perhaps you’d rather use **strong emphasis** instead?

Here’s an inline link to [Google](http://www.google.com/).

Here’s a [poorly-named link](http://www.google.com/ "Google").

In HTML, the `p` element represents a paragraph.

    printf("goodbye world!"); /* his suicide note
                                 was in C */

```
printf("goodbye world!"); /* his suicide note
                             was in C */
```

> Lorem iPad dolor sit amet, consectetur Apple adipisicing elit,
> sed do eiusmod incididunt ut labore et dolore magna aliqua Shenzhen.
> Ut enim ad minim veniam, quis nostrud no multi-tasking ullamco laboris
> nisi ut aliquip iPad ex ea commodo consequat.