Mathias Bynens

Using Showdown with and without jQuery

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.

Implementing Showdown with plain JavaScript

Showdown is library-agnostic, meaning it doesn’t depend on any of the available JavaScript frameworks. 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'),
      converter = new Markdown.Converter().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 = converter(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),
      converter = new Markdown.Converter().makeHtml;

  // instead of `keyup`, consider using `input` using this plugin: http://mathiasbynens.be/notes/oninput#comment-1
  $textarea.keyup(function() {
    $preview.html(converter($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.

Comments

Leave a comment

Comment on “Using Showdown with and without jQuery”

Some Markdown is allowed; HTML isn’t. Keyboard shortcuts are available.

It’s possible to add emphasis to text:

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

Select some text and press ⌘ + I on Mac or Ctrl + I on Windows to make it italic. For bold text, use ⌘ + B or Ctrl + B.

To create links:

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

If the link itself is not descriptive enough to tell users where they’re going, you might want to create a link with a title attribute, which will show up on hover:

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

Use backticks (`) to create an inline <code> span:

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

Select some inline text and press ⌘ + K on Mac or Ctrl + K on Windows to make it a <code> span.

Indent four spaces to create an escaped <pre><code> block:

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

Alternatively, you could use triple backtick syntax:

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

Select a block of text (more than one line) and press ⌘ + K on Mac or Ctrl + K on Windows to make it a preformatted <code> block.

Quoting text can be done as follows:

> 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.

Select a block of text and press ⌘ + E on Mac or Ctrl + E on Windows to make it a <blockquote>.