MDArea is a textarea augmentation that adds a toolbar and keyboard shortcuts to any textarea to turn it into a lightweight markdown editor.

Demo and Installation Guide

Installation

npm install github:bemky/mdarea

Import and Initialize

import MDArea from 'mdarea';
    
new MDArea(document.querySelector('textarea'));

MDArea will also render it's own textarea if not given one. Instead it can take an object where each key is an attribute of the textarea.

import MDArea from 'mdarea';

const area = new MDArea({
    name: "building[details]",
    rows: 10,
    class: "uniformInput"
});
document.append(area.el);

Markdown Parser

The Preview view renders with a small built-in markdown parser. To use a different parser (e.g. marked or snarkdown), assign a function that takes a markdown string and returns an HTML string to MDArea.parser:

import MDArea from 'mdarea';
import { marked } from 'marked';

MDArea.parser = marked.parse;

import MDArea from 'mdarea';
import snarkdown from 'snarkdown';

MDArea.parser = snarkdown;

This applies to every <md-area> instance on the page.

Development

Docs are generated using Middleman

To run server

middleman server

To package:

middleman build