JotDown is a light (< 20 kb bundled and minified), minimal Markdown editor for the web. It maintains a small size by modifying existing features such as textareas instead of completely reinventing the wheel. This also makes it simpler to customize, since the majority of the editor can be styled with CSS and customized with JavaScript.
See the hosted demo.
Get the library from NPM
npm install --save @kyleplo/jotdown
This library supports usage as both an ES6 module and a CommonJS module, as directly as in the browser.
import { JotDown, bold, italic } from "@kyleplo/jotdown"
const { JotDown, bold, italic } = require("@kyleplo/jotdown");
Whether you use ES modules or CommonJS, make sure you also include the CSS bundle.
<link rel="stylesheet" href="./node_modules/@kyleplo/jotdown/build/bundle.min.css">
<script src="https://gh.kyleplo.com/jotdown/bundle.min.js" defer></script>
<link rel="stylesheet" href="https://gh.kyleplo.com/jotdown/bundle.min.css">
Or host bundle.min.js and bundle.min.css yourself.
Initialize the editor
const editor = new JotDown(document.querySelector("#editor"), {
// formats and other configuration
inlineFormats: [bold, italic]
});
Get the Markdown value from the editor
const value = editor.value;
readonly
-Boolean
- Prevents the user from editing the text in the editor - essentially converts into a Markdown viewer - does not prevent the editor from being modified programmaticallymayBecomeWritable
-Boolean
- Whether a readonly editor should be prepared to become writable - defaults totrue
but can save memory if disabledinlineFormats
,blockFormats
-Array
- Array of format objects - See Formats section - defaults to emptyseekMemory
-Number
- Maximum distance in characters between the beginning and end of a format - defaults to 1000 charactershighlight
-Function
- Function for syntax highlighting - called with two parameters, the code and the language - defaults toundefined
- see Elucidate for a simple syntax highlighterlinkTarget
-String
- Value of thetarget
attribute to be put on generated links - defaults to"\_blank"
All of these formats are included in the package, but can be enabled/disabled individually. Custom formats can also be created.
const { JotDown, bold, italic } = require("@kyleplo/jotdown");
blockquote
- Begin a line with>
to format the line as a blockquote - currently cannot be nestedcodeFenced
- Surround text with three `s on each side to format as code - optional syntax highlighting by putting the programming language name after the first three `scodeIndent
- Begin a line with four spaces or a tab to format as codeheading.h1
- Begin a line with#
to format as a level 1 headingheading.h2
- Begin a line with##
to format as a level 2 headingheading.h3
- Begin a line with###
to format as a level 3 headingheading.h4
- Begin a line with####
to format as a level 4 headingheading.h5
- Begin a line with#####
to format as a level 5 headingheading.h6
- Begin a line with######
to format as a level 6 headingorderedList
- Begin a line with1.
,1.
,1)
, or1)
(with any number) to format as an ordered listrule
- Set a line to***
,---
, or+++
to format as a horizontal ruleunorderedList
- Begin a line with*
,-
, or+
to format as an unordered list
autoLink
- Automatically detect linksbold
- Surround text with**
or__
to format as boldcode
- Surround text with ` to format as codehighlight
- Surround text with==
to format highlightedimage
- Formatted like this:![alt text](link)
italic
- Surround text with*
or_
to format as italiclink
- Formatted like this:[label](link)
spoiler
- Surround text with||
to hide except when hoveredstrike
- Surround text with~~
to format crossed outsub
- Surround text with~
to format as subscript - only shows in readonly modesup
- Surround text with^
to format as superscript - only shows in readonly mode
The Markdown-formatted value of the editor
const value = editor.value;
Applies an inline format at the current caret position/selection
editor.applyInlineFormat(bold);
Removes an inline format from the current caret position/selection, and returns whether the operation was successful or not.
editor.removeInlineFormat(bold);
Applies a block format at the current caret position/selection
editor.applyBlockFormat(heading.h1);
Removes an block format from the current caret position/selection, and returns whether the operation was successful or not.
editor.removeInlineFormat(heading.h1);
Detects if a format exists at the current caret position/selection.
const isBold = editor.detectFormat(bold);
Fires whenever the text in the editor is modified.
editor.addEventListener("change", e => {
const value = e.target.value;
});
Fires whenever the caret position/selection within the editor changes.
editor.addEventListener("selectionchage", e => {
const value = e.target.value;
});