Markdownify - Markdown Editor

A drop-in JavaScript textarea replacement for writing beautiful and understandable markdown. The WYSIWYG-esque editor allows you to modify the markdown with toolbar buttons and shortcuts. It has been designed to be easy to use by users who are less technical.

How it works

Markdownify is an improvement of lepture's Editor project and includes a great many number of changes. It is bundled with CodeMirror and Font Awesome.

Quickstart

<link rel="stylesheet" href="/PATH/TO/markdownify.min.css">
<script src="/PATH/TO/markdownify.min.js"></script>

And then load Markdownify on the first textarea on a page

var markdownify = new Markdownify();
markdownify.render();

Use a specific textarea

Pure JavaScript method

var markdownify = new Markdownify(document.getElementById("MyID"));
markdownify.render();

jQuery method

var markdownify = new Markdownify($("#MyID")[0]);
markdownify.render();

Get the content

markdownify.codemirror.getValue();

Configuration

• element: The DOM element for the textarea to use. Defaults to the first textarea on the page.
• status: If set false, hide the statusbar. Defaults to true.
• tools: If set false, hide the toolbar. Defaults to true.

new Markdownify({
  element: document.getElementById("MyID"),
  status: false,
  tools: false,
});

What's changed?

As mentioned earlier, Markdownify is an improvement of lepture's Editor project. So you might be wondering, what's changed? Quite a bit actually. Here's some notable changes:

• Upgraded from CodeMirror 3 to CodeMirror 5
• Many changes to the style, appearance, and userfriendliness
• Interface more closely resembles Bootstrap
• Now mobile friendly
• The text editor now automatically grows as you type more
• Fixed a large amount of bugs
• Switched to Font Awesome icons
• Improved preview rendering in many ways
• Improved as-you-type appearance of headers and code blocks
• Simplified the toolbar