Mathias Bynens

Using Showdown with and without jQuery

Showdown 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:

window.onload = function() {
 // When using more than one `textarea` on your page, change the following line to match the one you’re after
 var eTextarea = document.getElementsByTagName('textarea')[0],
     ePreview = document.createElement('div'),
     converter = new Showdown.converter();
 // Continue only if the `textarea` is found
 if (eTextarea) {
  ePreview.id = 'preview';
  // Insert the preview `div` after the `textarea`
  eTextarea.parentNode.insertBefore(ePreview, eTextarea.nextSibling);
  eTextarea.onkeyup = function() {
   ePreview.innerHTML = converter.makeHtml(eTextarea.value);
  };
  // Trigger the `onkeyup` event
  eTextarea.onkeyup.call(eTextarea);
 };
};

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 Showdown.converter();
 $textarea.keyup(function() {
  $preview.html(converter.makeHtml($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

No comments yet.

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 */

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