mdast-util-to-hast

Transform mdast to hast.

Note: You probably want to use remark-rehype.

Installation

npm install mdast-util-to-hast

Usage

Say we have the following example.md:

## Hello **World**!

…and next to it, example.js:

var inspect = require('unist-util-inspect')
var unified = require('unified')
var parse = require('remark-parse')
var vfile = require('to-vfile')
var toHast = require('mdast-util-to-hast')

var tree = unified()
  .use(parse)
  .parse(vfile.readSync('example.md'))

console.log(inspect(toHast(tree)))

Which when running with node example yields:

root[1] (1:1-2:1, 0-20)
└─ element[3] (1:1-1:20, 0-19) [tagName="h2"]
   ├─ text: "Hello " (1:4-1:10, 3-9)
   ├─ element[1] (1:10-1:19, 9-18) [tagName="strong"]
   │  └─ text: "World" (1:12-1:17, 11-16)
   └─ text: "!" (1:19-1:20, 18-19)

API

`toHast(node[, options])`

Transform the given mdast tree to a hast tree.

Options

`options.allowDangerousHTML`

Whether to allow html nodes and inject them as raw HTML (boolean, default: false). Only do this when compiling later with hast-util-to-html.

`options.commonmark`

Set to true (default: false) to prefer the first when duplicate definitions are found. The default behaviour is to prefer the last duplicate definition.

`options.handlers`

Object mapping mdast nodes to functions handling those elements. Take a look at lib/handlers/ for examples.

Returns

HASTNode.

Notes

yaml and toml nodes are ignored
html nodes are ignored if allowDangerousHTML is false
positions are properly patched
Unknown nodes with children are transformed to div elements
Unknown nodes with value are transformed to text nodes
node.data.hName configures the hast element’s tag-name
node.data.hProperties is mixed into the hast element’s properties
node.data.hChildren configures the hast element’s children

Examples

`hName`

node.data.hName sets the tag-name of an element. The following mdast:

{
  type: 'strong',
  data: {hName: 'b'},
  children: [{type: 'text', value: 'Alpha'}]
}

Yields, in hast:

{
  type: 'element',
  tagName: 'b',
  properties: {},
  children: [{type: 'text', value: 'Alpha'}]
}

`hProperties`

node.data.hProperties in sets the properties of an element. The following mdast:

{
  type: 'image',
  src: 'circle.svg',
  alt: 'Big red circle on a black background',
  title: null
  data: {hProperties: {className: ['responsive']}}
}

Yields, in hast:

{
  type: 'element',
  tagName: 'img',
  properties: {
    src: 'circle.svg',
    alt: 'Big red circle on a black background',
    className: ['responsive']
  },
  children: []
}

`hChildren`

node.data.hChildren sets the children of an element. The following mdast:

{
  type: 'code',
  lang: 'js',
  data: {
    hChildren: [
      {
        type: 'element',
        tagName: 'span',
        properties: {className: ['hljs-meta']},
        children: [{type: 'text', value: '"use strict"'}]
      },
      {type: 'text', value: ';'}
    ]
  },
  value: '"use strict";'
}

Yields, in hast (note: the pre and language-js class are normal mdast-util-to-hast functionality):

{
  type: 'element',
  tagName: 'pre',
  properties: {},
  children: [{
    type: 'element',
    tagName: 'code',
    properties: {className: ['language-js']},
    children: [
      {
        type: 'element',
        tagName: 'span',
        properties: {className: ['hljs-meta']},
        children: [{type: 'text', value: '"use strict"'}]
      },
      {type: 'text', value: ';'}
    ]
  }]
}

mdast-util-to-nlcst — Transform mdast to nlcst
hast-util-sanitize — Sanitize hast nodes
hast-util-to-mdast — Transform hast to mdast
remark-rehype — rehype support for remark
rehype-remark — remark support for rehype

Contribute

See contributing.md in syntax-tree/mdast 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.

detj / mdast-util-to-hast