Mathias Bynens

Using Showdown/PageDown with and without jQuery

Published · 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];
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.

About me

Hi there! I’m Mathias. I work on Chrome DevTools and the V8 JavaScript engine at Google. HTML, CSS, JavaScript, Unicode, performance, and security get me excited. Follow me on Twitter, Mastodon, and GitHub.

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.

Naveen wrote on :

I downloaded Pagedown from Google Code and it has additional file of Markdown.Editor.js. Is that necessary for live projects? The documentation seems to be cryptic on that.

Leave a comment

Comment on “Using Showdown/PageDown with and without jQuery”

Your input will be parsed as Markdown.