Textarea Based Markdown Editor with jQuery

File Size: 62.1 KB
Views Total: 3292
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Textarea Based Markdown Editor with jQuery

A very simple jQuery plugin that converts a normal textarea element into a markdown editor with a instant preview. Requires marked JavaScript library for fast markdown parsing and compiling.

See also:

How to use it:

1. Load the necessary jQuery and marked JavaScript libraries in your document.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="marked.min.js"></script>

2. Load the textarea markdown editor after jQuery library.

<script src="jquery.textarea-markdown-editor.js"></script>

3. Create a textarea for the markdown editor.

<textarea id="editor">

4. Create an empty container for the preview area.

<div id="preview"></div>

5. Initialize the plugin to enable the markdown editor.

  var $editor = $('#editor');
  var $preview = $('#preview');

    onInsertedList: function(){ console.log("inserted list"); },
    onInsertedTable: function(){ console.log("inserted table"); },
    onInsertedCodeblock: function(){ console.log("inserted codeblock"); }

 t= setInterval(function(){
  }, 1000);

6. Available options & callbacks.

tabSize: 4,
onInsertedList: null,
onInsertedTable: null,
onInsertedCodeblock: null,
onSortedTable: null,
onMadeTable: null,
tabToSpace: true,
list: true,
table: true,
fontDecorate: true,
codeblock: true,
autoTable: true,
tableSeparator: '---',
csvToTable: true,
sortTable: true,
uploadingFormat: function(name) {
  return "![Uploading... " + name + "]()";

Change logs:


  • v0.9.0: Table functions.


  • v0.8.1: fix decorate timing


  • v0.8.0: Font decoratable.


  • Customizable uploading text.


  • add table callback


  • Fix number sort.


  • Can call instance methods.
  • Allow insert tab to beginning of unlist lines.


  • Table auto makeable.

This awesome jQuery plugin is developed by ttakuru88. For more Advanced Usages, please check the demo page or visit the official website.