jQuery Markdown live

Minimalist but customizable jQuery markdown editor with live preview

Demo

###Installation

bower install jquery-markdown-live

###Configuration Editor bar can be set with HTML only (look demo.html for more customization examples)

<ul class="bar">
    <li title="Bold" data-before="**" data-after="**" data-placeholder="some text in bold">
        <i class="fa fa-bold"></i>
    </li>
    <li title="Italics" data-before="*" data-after="*" data-placeholder="some text in italic">
        <i class="fa fa-italic"></i>
    </li>
    <li title="Link" data-before="[ " data-after="](http:// &quot;Link title&quot;)" data-placeholder="link">
        <i class="fa fa-link"></i>
    </li>
    <li title="Image" data-before="![Alt text](" data-after=")" data-placeholder="http://">
        <i class="fa fa-picture-o"></i>
    </li>
</ul>

Setup your preview html :

<div class="preview"></div>

Setup your texarea html :
data-bar : class of the bar to get events
data-preview : class to target the preview

<textarea data-bar=".bar" data-preview=".preview"></textarea>

Init the editor :

 $('textarea').markdownlive();