The simplest markdown editor with built in cloudinary image upload.
Switch branches/tags
Nothing to show
Clone or download
Latest commit e40835a May 12, 2017
Failed to load latest commit information.
demo Correct wrong CDN May 12, 2017
lib toggle 'markdownify-menu' buttons visibility Jan 4, 2017
vendor Jquery normal version Apr 11, 2015
.gitattributes Linguist Apr 11, 2015
.gitignore basic bower.json file May 20, 2015
LICENSE Initial commit Aug 1, 2014 Update Jul 5, 2015
bower.json Bump version Mar 9, 2016


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