remark-vdom

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;

• Future: support VNode keys.

• Future: allow custom components to overwrite default elements, e.g., MyLink instead of <a>.

• Future: Expose as widget

Note: remark-vdom exposes an array of VNodes. You will probably need to wrap the result in, for example, an article node, for rendering by virtual-dom.

Installation

npm:

npm install remark-vdom

remark-vdom is also available for duo, and as an AMD, CommonJS, and globals module, uncompressed and compressed.

Table of Contents

• Usage

• API

  • remark.use(vdom)

• Integrations

• License

Usage

var remark = require('remark');
var vdom = require('remark-vdom');
var doc = remark().use(vdom).process(
    'Some _emphasis_, **strongness**, and `code`.'
);

Yields (note it’s an array of nodes):

[ VirtualNode {
    tagName: 'P',
    properties: {},
    children: 
     [ VirtualText { text: 'Some ' },
       VirtualNode {
         tagName: 'EM',
         properties: {},
         children: [ VirtualText { text: 'emphasis' } ],
         key: undefined,
         namespace: null,
         count: 1,
         hasWidgets: false,
         hasThunks: false,
         hooks: undefined,
         descendantHooks: false },
       VirtualText { text: ', ' },
       VirtualNode {
         tagName: 'STRONG',
         properties: {},
         children: [ VirtualText { text: 'strongness' } ],
         key: undefined,
         namespace: null,
         count: 1,
         hasWidgets: false,
         hasThunks: false,
         hooks: undefined,
         descendantHooks: false },
       VirtualText { text: ', and ' },
       VirtualNode {
         tagName: 'CODE',
         properties: {},
         children: [ VirtualText { text: 'code' } ],
         key: undefined,
         namespace: null,
         count: 1,
         hasWidgets: false,
         hasThunks: false,
         hooks: undefined,
         descendantHooks: false },
       VirtualText { text: '.' } ],
    key: undefined,
    namespace: null,
    count: 10,
    hasWidgets: false,
    hasThunks: false,
    hooks: undefined,
    descendantHooks: false },
  VirtualText { text: '\n' } ]

API

remark.use(vdom)

Parameters

• vdom — This plugin.

Integrations

All mdast nodes can be compiled to HTML. Unknown mdast nodes are compiled to div nodes.

In addition, remark-vdom can be told how to compile nodes through three data properties:

• htmlName — Tag-name to compile as;
• htmlAttributes — Map of attributes to add.

For example, the following node:

{
  "type": "emphasis",
  "data": {
    "htmlName": "i",
    "htmlAttributes": {
      "id": "foo"
    }
  },
  "children": [{
    "type": "text",
    "value": "baz",
  }]
}

...would yield (when rendering):

<i id="foo">baz</i>

License

MIT © Titus Wormer