Mathias Bynens

Using Showdown/PageDown with and without jQuery

· tagged with HTML, JavaScript, 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.

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.

Comments

Ted wrote on :

Really nice. Thanks!

Two quick questions please:

  • How to re-enable the Enter key to break the line and start a new one? (not by doing four spaces as it is by default).
  • How to disable some conversions? I think I have enough knowledge to do that by myself by reading the core code, but I’m really busy on terminating the work at the deadlines. So I hope you point the line(s) to edit to re-enable Enter key and maybe remove some conversions.

Leave a comment

Comment on “Using Showdown/PageDown 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>.