Neolithic Populous Metropolis
Miss any of our Open RFC calls?Watch the recordings here! »

remark-vdom

3.0.1 • Public • Published

remark-vdom Build Status Coverage Status Chat

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 = require('remark');
var vdom = require('remark-vdom');

Process:

var vtree = remark()
  .use(vdom)
  .process('_Emphasis_, **importance**, and `code`.')
  .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 = {
  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.

License

MIT © Titus Wormer

Install

npm i [email protected]

Version

3.0.1

License

MIT

Last publish

Collaborators

  • avatar
  • avatar