30-seconds-of-code/node_modules/mdast-util-to-hast

mdast-util-to-hast

Transform mdast to hast.

Note

: You probably want to use remark-rehype.

Installation

npm:

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: ';'}
    ]
  }]
}

Related

• 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.

License

MIT © Titus Wormer