Get new jQuery plugins just once a week



April 15, 2015

Markdownify | the simplest markdown editor with built in cloudinary image upload.

Markdownify is a jQuery plugin for the simplest markdown editor with built in cloudinary image upload.

Created by Thibaut Assus



Markdownify jQuery plugin



The simplest markdown editor with built in cloudinary image upload.

Based on CodeMirror for the editor and Marked for the preview.



Lets say you have a textarea you want to markdownify.

Install with bower:

bower install jquery.markdownify
<textarea class='markdown' id="markdown"></textarea>

You can then add buttons for convenience of your users. You need to encapsulate your links (or buttons) in a item with the 'markdownify-menu' class. The data-target attribute is the id of the textarea you want to control.

<div class='markdownify-menu' data-target='markdown'>
  <a class='btn--insert' data-prefix='*' data-suffix='*' href='javascript:void(0)'>i</a>
  <a class='btn--insert' data-prefix='**' data-suffix='**' href='javascript:void(0)'>b</a>
  <a class='btn--insert' data-prefix='# ' href='javascript:void(0)'>h1</a>
  <a class='btn--insert' data-prefix='## ' href='javascript:void(0)'>h2</a>
  <a class='btn--insert' data-prefix='> ' href='javascript:void(0)'>quote</a>
  <a class='btn--insert' data-prefix='* ' href='javascript:void(0)'>list</a>
  <a class='btn--insert' data-prefix='1. ' href='javascript:void(0)'>1.</a>
  <a class='btn--insert' data-type='link' href='javascript:void(0)'>link</a>

To upload an image directly to cloudinary, you can add add a param to markdownify :

  cloudinary: {
    // create an account on cloudinary and put here your cloud name
    cloudName: 'YOUR_CLOUD_NAME',
    // get your unsigned uploading key
    unsignedUploadingKey: 'YOUR_UNSIGNED_UPLOADING_KEY'


If you want the preview toggle, add this after your markdown editor HTML:

<div class='markdown-preview'></div>
<a class='btn--preview' href='javascript:void(0)' data-target='markdown'>preview</a>

If you want the edit/preview button text to be different, modify the following:

Change Edit button text: Add the following attribute to the preview button:


Change Preview button text: Modify the default text that's within the tag:

<a class='btn--preview' href='javascript:void(0)' data-target='markdown'>edit me here</a>

The code is extracted from and extensively used in


Related posts:

Tour Tip
Markdownify jQuery plugin

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever
Couple Gift Ideas