remark-html

Compile markdown to HTML with remark.

Installation

npm:

npm install remark-html

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

Usage

Dependencies:

var remark = require('remark');
var html = require('remark-html');

Process.

var file = remark().use(html).process([
    '# Hello & World',
    '',
    '**Alpha**, _bravo_, and ~~Charlie~~.'
].join('\n'));

Yields:

<h1>Hello &#x26; World</h1>
<p><strong>Alpha</strong>, <em>bravo</em>, and <del>Charlie</del>.</p>

API

remark.use(html[, options])

options

All options except for sanitize are passed to hast-util-to-html.

options.sanitize

Whether or not to sanitize the output (boolean or Object, default: true).

An object can be passed, in which case it’s passed to hast-util-sanitize. By default, input is sanitized according to GitHub’s sanitation rules, with the addition that all embedded HTML is also stripped.

false can be passed to allow dangerous HTML.

CommonMark

You still need to set commonmark: true in remarks options.

CommonMark support is a goal but not (yet) a necessity. There are some (roughly 115 of 550, relating to inline precedence, lists, emphasis and importance) issues which I’d like to cover in the future. Note that this sounds like a lot, but they have to do with obscure differences which do not often occur in the real world. Read more on some of the reasoning in doc/commonmark.md.

Integrations

remark-html works great with:

• wooorm/remark-toc, which generates tables of contents;
• wooorm/remark-github, which generates references to GitHub issues, PRs, users, and more;
• ...and more.

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

In addition, remark-html can be told how to compile nodes through three data properties (more information):

• hName — Tag-name to compile as;
• hChildren — HTML content to add (instead of children and value);
• hProperties — Map of attributes to add.

For example, the following node:

{
  type: 'emphasis',
  data: {
    hName: 'i',
    hProperties: {
      className: 'foo'
    },
    hChildren: [{
        type: 'text',
        value: 'bar'
    }]
  },
  children: [{
    type: 'text',
    value: 'baz',
  }]
}

...would yield:

<i class="foo">bar</i>

License

MIT © Titus Wormer