remark-vdom
Compile Markdown to VDOM with remark
Last updated 2 years ago by wooorm .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install remark-vdom 
SYNC missed versions from official npm registry.

remark-vdom

Build Coverage Downloads Size Sponsors Backers Chat

remark plugin to compile Markdown to Virtual DOM.

  • [x] Inherently safe and sanitized: there is no way to pass raw HTML through
  • [x] Supports footnotes, todo lists
  • [x] Support VNode keys
  • [x] Custom components overwriting default elements (MyLink instead of <a>)

Note!

This plugin is ready for the new parser in remark (micromark, see remarkjs/remark#536). No change is needed: it works exactly the same now as it did before!

Install

npm:

npm install remark-vdom

Use

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.result, {depth: null})
  })

Now, running node example yields:

VirtualNode {
  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])

Compile Markdown to Virtual DOM.

ℹ️ In unified@9.0.0, the result of .process changed from file.contents to file.result.

options
options.sanitize

How to sanitize 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 sanitized 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

Optimization 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 (such as VNode, VText, Widget). 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.

Security

Use of remark-vdom is safe by default, but changing the sanitize option can open you up to a cross-site scripting (XSS) attack if the tree is unsafe.

Related

Contribute

See contributing.md in remarkjs/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Titus Wormer

Current Tags

  • 10.0.0                                ...           latest (22 days ago)

18 Versions

  • 10.0.0                                ...           22 days ago
  • 9.0.1                                ...           7 months ago
  • 9.0.0                                ...           7 months ago
  • 8.0.0                                ...           a year ago
  • 7.0.1                                ...           a year ago
  • 7.0.0                                ...           2 years ago
  • 6.0.0                                ...           2 years ago
  • 5.0.0                                ...           3 years ago
  • 4.1.1                                ...           3 years ago
  • 4.1.0                                ...           3 years ago
  • 4.0.0                                ...           4 years ago
  • 3.1.0                                ...           4 years ago
  • 3.0.1                                ...           4 years ago
  • 3.0.0                                ...           4 years ago
  • 2.0.1                                ...           4 years ago
  • 2.0.0                                ...           5 years ago
  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 17
Last Day 0
Last Week 0
Last Month 0
Dependencies (4)
Dev Dependencies (10)

Copyright 2014 - 2016 © taobao.org |