Ghost-Like Responsive jQuery Markdown Editor with Live Preview

Ghost-Like Responsive jQuery Markdown Editor with Live Preview
File Size: 120 KB
Views Total: 3363
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Yet another jQuery based markdown editor inspired by ghost.com that features live preview, text counter and responsive design for all major devices.

See also:

How to use it:

1. Include the latest version of jQuery library together with ghostdown.js and ghostdown.css in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="ghostdown.js"></script>
<link href="ghostdown.css" media="all" rel="stylesheet">

2. Create the html.

<div class="features">
<section class="editor">
<div class="outer">
<div class="editorwrap">
<section class="entry-markdown">
<header class="floatingheader"> &nbsp;&nbsp; Markdown </header>
<section class="entry-markdown-content">
<textarea id="entry-markdown">
...
</textarea>
</section>
</section>
<section class="entry-preview active">
<header class="floatingheader"> &nbsp;&nbsp; Preview <span class="entry-word-count">0 words</span> </header>
<section class="entry-preview-content">
<div class="rendered-markdown"></div>
</section>
</section>
</div>
</div>
</section>
</div>

3. Alternatively, you can also implement the plugin as a widget on your web page. Following the html structure like this:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="ghostdown.js"></script>
<link href="ghostdown.css" media="all" rel="stylesheet">
<script src="jquery.ghostdown.js"></script>
</head>

<body>
<div class="features">
<section class="editor">
<div class="outer">
<div class="editorwrap">
<section class="entry-markdown">
<header class="floatingheader"> &nbsp;&nbsp; Markdown </header>
<section class="entry-markdown-content">
<textarea>
...
</textarea>
</section>
</section>
<section class="entry-preview active">
<header class="floatingheader"> &nbsp;&nbsp; Preview <span class="entry-word-count">0 words</span> </header>
<section class="entry-preview-content">
<div class="rendered-markdown"></div>
</section>
</section>
</div>
</div>
</section>
</div>

<script>
$(document).ready(function () {
$(".editor").ghostDown();
});
</script>

</body>

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