Create A Simple Markdown Editor with jQuery Markdown Plugin

Markdown is a lightweight jQuery plugin for creating a simple markdown editor that allows the user to easily and quickly insert markdown syntax to a textarea.

See also:

• Ghost-Like Responsive jQuery Markdown Editor with Live Preview

How to use it:

1. Create the html for a markdown editor.

<div>
<div>
<button onClick="$('#demo').mdBold()">Bold</button>
<button onClick="$('#demo').mdItalic()">Italic</button>
<button onClick="$('#demo').mdHeader({number: 1})">H1</button>
<button onClick="$('#demo').mdHeader({number: 2})">H2</button>
<button onClick="$('#demo').mdHeader({number: 3})">H3</button>
<button onClick="$('#demo').mdHeader({number: 4})">H4</button>
<button onClick="$('#demo').mdLink({default_url: prompt('Enter URL please')})">Link</button>
<button onClick="$('#demo').mdImage({default_image_url: prompt('Enter URL Please')})">Image</button>
<button onClick="$('#demo').mdQuote()">Quote</button>
<button onClick="$('#demo').mdCode()">Code</button>
<button onClick="$('#demo').mdNumberedList()">Numbered List</button>
<button onClick="$('#demo').mdBulletList()">Bullet List</button>
</div>
<textarea rows="8" cols="90" id="demo"></textarea>
</div>

2. Include the jQuery javascript library and jQuery Markdown plugin at the end of your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-markdown.js"></script>

3. That's it.

---

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