markup-it
is a JavaScript library to parse and modify markuped content (for example Markdown) using an intermediate format backed by an immutable model.
$ npm i markup-it --save
Initialize a syntax:
var MarkupIt = require('markup-it');
var markdownSyntax = require('markup-it/syntaxes/markdown');
var htmlSyntax = require('markup-it/syntaxes/html');
var markdown = new MarkupIt(markdownSyntax);
var html = new MarkupIt(htmlSyntax);
var content = markdown.toContent('Hello **World**');
// Render back to markdown:
var textMd = markdown.toText(content);
// Render to HTML
var textHtml = html.toText(content);
markup-it
can integrates with Draft-js for rich text editing.
Generate a ContentState blocks list for draft-js
using DraftUtils.encode
:
var rawContent = MarkupIt.DraftUtils.encode(content);
var blocks = draft.convertFromRaw(rawContent);
var content = draft.ContentState.createFromBlockArray(blocks);
And output markdown from a ContentState using DraftUtils.decode
:
var rawContent = draft.convertToRaw(content);
var content = MarkupIt.DraftUtils.decode(rawContent);
var text = markdown.toText(content);
This module contains the markdown syntax, but you can write your custom syntax or extend the existing ones.
var myRule = MarkupIt.Rule(DraftMarkup.BLOCKS.HEADING_1)
.regExp(/^<h1>(\S+)<\/h1>/, function(match) {
return {
text: match[1]
};
})
.toText(function(innerText) {
return '<h1>' + innerText+ '</h1>';
});
Create a new syntax inherited from the markdown one:
var mySyntax = markdownSyntax.addBlockRules(myRule);
Checkout the GitBook syntax as an example of custom rules extending a syntax.