remark-vdom

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 = require('remark');
var vdom = require('remark-vdom');
 
var vtree = remark()
  .use(vdom)
  .processSync('_Emphasis_, **importance**, and `code`.')
  .contents;
 
console.dir(vtree, {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 classNames are stripped. To keep them in, use something like:

var merge = require('deepmerge');
var gh = require('hast-util-sanitize/lib/github');
 
var schema = merge(gh, {attributes: {'*': ['className']}});
 
var vtree = remark().use(vdom, {sanitize: schema}).processSync(/* ... */);

`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 = {
  code: function (tagName, props, children) {
    /* Ensure a default programming language is set. */
    if (!props.className) {
      props.className = 'language-js';
    }
 
    return h(tagName, props, children);
  }
}

Integrations

Integrates with the same tools as remark-html.

npm

remark-vdom

remark-vdom

Installation

Usage

API

`remark().use(vdom[, options])`

`options`

`options.sanitize`

`options.prefix`

`options.h`

`options.components`

Integrations

License

Keywords

Install

Version

License

Homepage

Repository

Last publish

Collaborators