GitHub-style Markdown Editor For jQuery - tail.writer

GitHub-style Markdown Editor For jQuery - tail.writer

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


v0.3.1 (2018-09-24)

  • Add: A German translation.
  • Add: A minified version, minified with jsCompress.
  • Add: New helper methos trigger to trigger tail.DateTime specific CustomEvents.
  • BugFix: Wrong added line-break when the cursor is not at the end of the line.¬†

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.

  • Publication date: 24.09.2018
  • Source