Markdown Editor

Thankful to Krajee! BUY A COFFEEor to get more out of us.

A Boostrap styled markdown editor that converts a native HTML textarea to an advanced markdown editor. The editor offers live preview, export, full screen mode, and more features. The editor includes inbuilt support for markdown parsing using markdown-it JS based parser. However, the editor can support any markdown parser via javascript library / method or even a server based parser via an ajax action. Other markdown parsers are configurable (both as a server call OR a local JS method/library). In addition, the plugin allows custom button actions and properties to be setup.

View a complete demo.


Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)

  • Inbuilt support for advanced markdown syntax editing and formatting via the markdown-it JS based parser. The key features of the markdown-it parser are:
    • It follows the CommonMark spec and adds syntax extensions & sugar (URL autolinking, typographer).
    • Configurable syntax! You can add new rules and even replace existing ones.
    • High speed.
    • Safe by default.
    • Community-written plugins and other packages on npm.
  • In addition to supporting all common markdown syntax formats, this also includes support for various markdown-it plugins like emojis, smart arrows, checkboxes, subscript, superscript, definition list, footnote, abbreviation, marked / inserted text etc.
  • Advanced additional support for emojis and emoticons to be inserted. The editor also supports using rendering emojis using twitter emojis.
  • The editor can be configured to use any markdown based parser OR even use a server based parsing via AJAX action.
  • Inbuilt live preview and conversion of the markdown text to HTML formatted text. The editor can be toggled and configured to be set in one of the three modes:
    • Editor Mode: Displays only the editor for editing the markdown text.
    • Preview Mode: Displays only the preview for viewing the HTML formatted text.
    • Split Mode: Shows both the editor and preview modes split side by side.
  • One can configure the editor by default to open in one of the above modes.
  • Offers live preview and synchronized scrolling between editor and preview when typing text OR scrolling in the editor. This is especially useful in the Split Mode.
  • The editor also includes inbuilt support for FULL SCREEN mode toggling and editing. One can toggle the editor to FULL screen for any of the above modes.
  • One can also configure the editor to by default open in full screen mode if needed.
  • Highly extensible and easily configurable toolbar buttons and actions. Supports 4 different toolbar button locations (Header Left, Header Right, Footer Left, and Footer Right).
  • Inbuilt support for unlimited undo and redo of editing actions via an inbuilt UndoStack library.
  • Intelligently senses a FORM RESET (if the input is enveloped in a form) and resets the editor to original state on form reset including the undo / redo stack.
  • Toolbar buttons use FontAwesome icons by default and require the FontAwesome CSS to be loaded. But one can configure the editor to use any icons or CSS styling.
  • Offers THEME support for easily styling the editor for one's own theme.
  • Advanced styling and configuration available via templates and setting various CSS and layout properties.
  • Inbuilt EXPORT feature to allow exporting the editor content as
    • TEXT
    • HTML
  • The editor allows inbuilt support for exported content to be directly downloaded via Data URIs, which is supported by most modern browsers.
  • The export download can also be configured to use a server based URL action to download content.
  • Offers inbuilt localization and translation support and allows using multiple language markdown editors on the same page.

The krajee-markdown-editor plugin can be installed automatically or manually using one of these options:

Bower Package Manager

Installation via bower package manager is as simple as running:

$ bower install krajee-markdown-editor

Node Package Manager

Installation via NPM is as simple as running:

$ npm install krajee-markdown-editor

Composer Package Manager

You can install krajee-markdown-editor via composer package manager. Either run:

$ php composer.phar require kartik-v/krajee-markdown-editor "dev-master"

or add:

"kartik-v/krajee-markdown-editor": "dev-master"

to your composer.json file

Manual Install

You can also manually install the plugin easily to your project. Just download the source ZIP or TAR ball and extract the plugin asset files and folders into your project.


The plugin will automatically convert textarea inputs to a markdown editor widget whenever you attach a css class markdown to the textarea input. But, if you are initializing the plugin separately via javascript, then DO NOT ATTACH the css class markdown to the input (as it will result in duplicate initializations and the javascript code maybe skipped).

Load the following assets on your application page in the order mentioned.

Note that the /path/to in the links below specifies the web accessible location on your server where you have extracted and installed the krajee-markdown-editor repo's files.

<!-- any of bootstrap 5.x, 4.x, 3.x styling is supported. Plugin auto detects bootstrap version based on 
    bootstrap JS library loaded on the page. Else set `$.fn.markdownEditorBsVersion` explicitly before initializing the plugin -->
<link rel="stylesheet" href="" crossorigin="anonymous">
<!-- Font Awesome 5.x Icon library (check themes to change this) -->
<link rel="stylesheet" href="">
<!-- Krajee Markdown Editor Main Library Default Style -->
<link href="" media="all" rel="stylesheet" type="text/css"/>
<!-- Highlight JS style provided with plugin for code styling -->
<link href="" media="all" rel="stylesheet" type="text/css"/>
<!-- jQuery JS Library -->
<script src=""></script>
<!-- Twitter Emojis Plugin (if you need twitter emojis) -->
<script src=""></script>
<!-- Include DOM purify plugin if you need to purify HTML output (needed only if markdown-it HTML input 
   is allowed). This must be loaded before markdown-editor.js. -->
<script src="" type="text/javascript"></script>
<!-- Markdown IT Main Library -->
<script src="" type="text/javascript"></script>
<!-- Markdown IT Definition List Plugin -->
<script src="" type="text/javascript"></script>
<!-- Markdown IT Footnote Plugin -->
<script src="" type="text/javascript"></script>
<!-- Markdown IT Abbreviation Plugin -->
<script src="" type="text/javascript"></script>
<!-- Markdown IT Subscript Plugin -->
<script src="" type="text/javascript"></script>
<!-- Markdown IT Superscript Plugin -->
<script src="" type="text/javascript"></script>
<!-- Markdown IT Underline/Inserted Text Plugin -->
<script src="" type="text/javascript"></script>
<!-- Markdown IT Mark Plugin -->
<script src="" type="text/javascript"></script>
<!-- Markdown IT SmartArrows Plugin -->
<script src="" type="text/javascript"></script>
<!-- Markdown IT Checkbox Plugin -->
<script src="" type="text/javascript"></script>
<!-- Markdown IT East Asian Characters Line Break Plugin -->
<script src="" type="text/javascript"></script>
<!-- Markdown IT Emoji Plugin -->
<script src="" type="text/javascript"></script>
<!-- Highlight JS Main Plugin Library for code styling -->
<script src="" type="text/javascript"></script>
<!-- Bootstrap Complete Bundle Library (including Popper) -->
<script src="" type="text/javascript"></script>
<!-- Krajee Markdown Editor Main Library -->
<script src="" type="text/javascript"></script>
<!-- Optionally include theme.js script or theme.css for a different theme if needed -->
<!-- script src="" type="text/javascript"></script -->
<!-- Optionally include localization script for your language if needed -->
<!-- script src="" type="text/javascript"></script>

If you noticed, you need to load the jquery.min.js and bootstrap.min.css in addition to the markdown-editor.min.css and markdown-editor.min.js. The theme and locale file for your theme and language can be optionally included for styling as per your need or translating for your locale if needed. In order to use twitter emojis - you need to set the useTwemoji property to true in the plugin and load the twitter emoji library twemoji.min.js before markdown.min.js library and other markdown-it scripts.

Bootstrap Usage

When using with a specific version of bootstrap, specify the bsVersion in your plugin settings. For example, if using with bootstrap 3.x - set it to the relevant version 3.3.7. By default, the plugin is set to work with bootstrap 4.x.

Optional Dependent Plugins

The purify.min.js file is the source for the DomPurify plugin by cure53. It is required to be loaded before markdown-editor.min.js if you wish to purify your HTML for HTML content preview and is called when purifyHtml is set to true. This is normally only needed when you set allow html to true within markdownItOptions.

The twemoji.min.js file is the source for the Twitter Emoji Plugin. It is required to be loaded before markdown-editor.min.js if you wish to use Twitter Emojis when useTwemoji is set to true.

Note that Krajee Markdown Editor uses the markdown-it JS Based parser library by default. The markdown-it library supports various plugins. The following markdown-it plugins are included by default with the plugin repo. Set markdownItPlugins property to choose / specify which plugins you need to be loaded.

  • Abbreviation Plugin: markdown-it-abbr.min.js
  • Checkbox Plugin: markdown-it-checkbox.min.js
  • East Asian Characters Line Breaks Plugin: markdown-it-cjk-breaks.min.js
  • Container Plugin: markdown-it-container.min.js
  • Definition List: markdown-it-deflist.min.js
  • Emoji Plugin: markdown-it-emoji.min.js
  • Emoji Light Version Plugin: markdown-it-emoji-light.min.js
  • Footnote Plugin: markdown-it-footnote.min.js
  • Inserted Text Plugin: markdown-it-ins.min.js
  • Marked Text Plugin: markdown-it-mark.min.js
  • Smart Arrows Plugin: markdown-it-smartarrows.min.js
  • Subscript Plugin: markdown-it-sub.min.js
  • Superscript Plugin: markdown-it-sup.min.js

Render a textarea input on your page as shown below

<textarea id="editor-id" rows="15">

Next initialize the plugin on your page. For example to initialize using javascript - the following javascript code can be placed in document.ready or at any place you wish on your page after your textarea input is rendered.

// initialize with defaults
// with plugin options
$("#editor-id").markdownEditor({useTwemoji: true});

The #editor-id is the identifier for the textarea on your page.

Alternatively, you can directly set the plugin options to any input, through HTML 5 data attributes to your input field. Note that for this case, you need to attach the CSS class markdown to the input.

As noted earlier, when initializing plugin via javascript (step 2a), you MUST NOT attach the CSS class markdown to the input.

<textarea id="editor-id" rows="15" class="markdown" data-use-twemoji="true">

As shown in the usage section, translations are available to set the plugin to display in your own locale. Follow these steps to enable translations for your language:

  • Load your language locale script file on your page from /js/locales/<lang>.js. This script must be loaded after the core markdown-editor.js file, where <lang> is the language code (e.g. de, fr etc.). If your locale file does not exist, you can create the translations for the new language by submitting a github pull request to add to this folder. Check the sample locale file to copy and create a translation configuration for your own language.

  • Configure the plugin's language property to the same language code identified by <lang> above.

The plugin has been implemented as extensions in the following frameworks

Sl. Framework Extension Source Developed By Extension Demo
1. Yii Framework 2.0 Yii2 Widgets Krajee Yii2 Markdown Editor

Do you know any other framework extension using this plugin which is not listed here? Tell us so that we can consider its inclusion in this list.

markdown-editor is released under the BSD 3-Clause License. See the bundled for details.


You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.

visitors to Krajee Jquery Plugins since 22-May-2017