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);var content = html.toContent('Hello <b>World</b>');
var textMd = markdown.toText(content);Usage with Slate
const Slate = require('slate');
var rawJson = MarkupIt.SlateUtils.encode(content);
var state = Slate.Raw.deserialize(rawJson);And output markdown from a State using SlateUtils.decode:
var rawJson = Slate.Raw.serialize(state);
var content = MarkupIt.SlateUtils.decode(rawJson);
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(state, match) {
return {
tokens: state.parseAsInline(match[1])
};
})
.toText(function(state, token) {
return '<h1>' + state.renderAsInline(token) + '</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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent