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
Usage
var remark = ;var vdom = ; var vtree = contents; consoledirvtree depth: null;
Yields:
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
or boolean
, default: null
).
Sanitation is done by hast-util-sanitize
, except when
false
is given. If an object is passed in, it’s given as a schema
to sanitize
. By default, input is sanitised according to GitHub’s
sanitation rules.
Embedded HTML is always stripped.
For example, by default className
s are stripped. To keep them in,
use something like:
var merge = ;var gh = ; var schema = ; var vtree = ;
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.