Ghost-Like Responsive jQuery Markdown Editor with Live Preview
File Size: | 120 KB |
---|---|
Views Total: | 3704 |
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"> Markdown </header> <section class="entry-markdown-content"> <textarea id="entry-markdown"> ... </textarea> </section> </section> <section class="entry-preview active"> <header class="floatingheader"> 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"> Markdown </header> <section class="entry-markdown-content"> <textarea> ... </textarea> </section> </section> <section class="entry-preview active"> <header class="floatingheader"> 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.