remark-vdom

remark-vdom

Compiles markdown to Virtual DOM. Built on remark, an extensively tested and pluggable markdown processor.

• 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

Say we have the following file, example.js:

var unified = require('unified')
var markdown = require('remark-parse')
var vdom = require('remark-vdom')

unified()
  .use(markdown)
  .use(vdom)
  .process('Some _emphasis_, **importance**, and `code`.', function(err, file) {
    if (err) throw err
    console.dir(file.contents, {depth: null})
  })

Now, running node example yields:

{
  tagName: 'DIV',
  properties: { key: undefined },
  children:
   [ VirtualNode {
       tagName: 'P',
       properties: { key: undefined },
       children:
        [ VirtualText { text: 'Some ' },
          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: 10,
       hasWidgets: false,
       hasThunks: false,
       hooks: undefined,
       descendantHooks: false } ],
  key: 'h-1',
  namespace: null,
  count: 11,
  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: code}

function code(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.

Related

• remark-rehype — Properly transform to an HTML virtual DOM (HAST)
• rehype-react — Transform HAST to React
• remark-react — Compile markdown to React
• remark-man — Compile to man pages
• remark-html — Compile to HTML

Contribute

See contributing.md in remarkjs/remark for ways to get started.

This organisation has a Code of Conduct. By interacting with this repository, organisation, or community you agree to abide by its terms.

License

MIT © Titus Wormer