Ghost-Like Responsive jQuery Markdown Editor with Live Preview

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

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.