GitHub-style Markdown Editor For jQuery - tail.writer

GitHub-style Markdown Editor For jQuery - tail.writer
File Size: 48 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

The tail.writer jQuery plugin turns textarea fields into WYSIWYG markdown editors, which support the GitHub flavored Markdown markup language. Build for jQuery 1.8.0 and later. With support for live preview, line/character/word counters and more.

How to use it:

1. Include the main stylesheet and a theme CSS of your choice on your html page.

<!-- Core-->
<link rel="stylesheet" href="tail.writer-VERSION.css">
<!-- Themes-->
<link rel="stylesheet" href="tail.writer.dark.css">
<link rel="stylesheet" href="tail.writer.github.css">

2. Include the following JavaScript files at the bottom of the page.

<script src="/path/to/marked.js"></script>
<script src="/path/to/jquery.js"></script>
<script src="query.tail.writer-VERSION.js"></script>

3. Call the function on the textarea to generate a default markdown editor.


4. All default settings to customize the markdown editor.


  // Width/height of the markdown editor
  "width":     "100%",
  "height":     ["auto", "500px"],

  // Additional CSS class
  "classes":      "",

  // Enable / disable the resize event
  "resize":     true,

  // Customize toolbar
  "toolbar":      ["header", "|", "bold", "italic", "strikethrough", "|", "quote", 
    "code-inline", "code-block", "indent", "outdent", "|", "link", 
    "image", "table", "hr", "|", "list-unordered", "list-ordered", "|", "preview"],

  // Where to position the tooltbar
  "toolbar_pos":    "top",

  // Enable / disable the indent
  "indent_tab":   true,

  // The number of indent size
  "indent_size":    4,

  // True to use "======", False to use a single "#".
  "action_header1": true,

  // True to use "------", False to use "##".
  "action_header2": true,

  // The markdown token for bold
  "action_bold":    "**",

  // The markdown token for italic
  "action_italic":  "_",

  // Enable / disable the tooltips
  "tooltip_show":   true,

  // Enable / disable the status bar
  "statusbar_show": true

About Author:

Author: SamBrishes


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