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.