remark-vdom compiles markdown to Virtual DOM. Built on remark, an extensively tested and pluggable markdown parser.
- Inherently safe and sanitized: there is no way to pass raw HTML through.
- Supports footnotes, todo lists;
- Support VNode keys;
- Custom components overwriting default elements
(
MyLink
instead of<a>
);
Installation
npm:
npm install remark-vdom
remark-vdom is also available as an AMD, CommonJS, and globals module, uncompressed and compressed.
Usage
Dependencies:
var remark = ;var vdom = ;
Process:
var vtree = contents;
Yields (note it’s an array of nodes):
VirtualNode { tagName: 'DIV', properties: { key: undefined }, children: [ VirtualNode { tagName: 'P', properties: { key: undefined }, children: [ VirtualNode { tagName: 'EM', properties: { key: undefined }, children: [ VirtualText { text: 'Emphasis' } ], key: 'h-3', namespace: null, count: 1, hasWidgets: false, hasThunks: false, hooks: undefined, descendantHooks: false }, VirtualText { text: ', ' }, VirtualNode { tagName: 'STRONG', properties: { key: undefined }, children: [ VirtualText { text: 'importance' } ], key: 'h-4', namespace: null, count: 1, hasWidgets: false, hasThunks: false, hooks: undefined, descendantHooks: false }, VirtualText { text: ', and ' }, VirtualNode { tagName: 'CODE', properties: { key: undefined }, children: [ VirtualText { text: 'code' } ], key: 'h-5', namespace: null, count: 1, hasWidgets: false, hasThunks: false, hooks: undefined, descendantHooks: false }, VirtualText { text: '.' } ], key: 'h-2', namespace: null, count: 9, hasWidgets: false, hasThunks: false, hooks: undefined, descendantHooks: false } ], key: 'h-1', namespace: null, count: 10, hasWidgets: false, hasThunks: false, hooks: undefined, descendantHooks: false }
API
remark().use(vdom[, options])
Compiles markdown to Virtual DOM.
options
options.sanitize
How to sanitise the output (Object
, default: null
).
An object can be passed, in which case it’s passed to
hast-util-sanitize
. By default, input is sanitised
according to GitHub’s sanitation rules, with the addition
that all embedded HTML is also stripped.
options.prefix
Optimisation hint (string
, default: h-
).
options.h
Hyperscript to use (Function
, default: require('virtual-dom/h')
).
options.components
Map of tag-names to custom components (Object.<Function>
, optional).
That component is invoked with tagName
, props
, and children
.
It can return any VDOM compatible value (VNode
, VText
, Widget
,
etc.). For example:
var components = { /* Ensure a default programming language is set. */ if !propsclassName propsclassName = 'language-js'; return ; }
Integrations
Integrates with the same tools as remark-html.