Skip to content
Branch: main
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.

readme.md

remark-html

Build Coverage Downloads Size Sponsors Backers Chat

remark plugin to serialize Markdown as HTML.

⚠️ This package essentially packs remark-rehype and rehype-stringify, and although it does support some customisation, it isn’t very pluggable. It’s probably smarter to use remark-rehype directly and benefit from the rehype ecosystem.

Install

npm:

npm install remark-html

Use

Say we have the following file, example.md:

# Hello & World

> A block quote.

* Some _emphasis_, **importance**, and `code`.

And our script, example.js, looks as follows:

var fs = require('fs')
var unified = require('unified')
var markdown = require('remark-parse')
var html = require('remark-html')

unified()
  .use(markdown)
  .use(html)
  .process(fs.readFileSync('example.md'), function(err, file) {
    if (err) throw err
    console.log(String(file))
  })

Now, running node example yields:

<h1>Hello &#x26; World</h1>
<blockquote>
<p>A block quote.</p>
</blockquote>
<ul>
<li>Some <em>emphasis</em>, <strong>importance</strong>, and <code>code</code>.</li>
</ul>

API

remark().use(html[, options])

Serialize Markdown as HTML.

options

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

options.sanitize

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

If false, no HTML is sanitized, and dangerous HTML is left unescaped.

If true or an object, sanitation is done by hast-util-sanitize If an object is passed in, it’s given as a schema to hast-util-sanitize. If true, input is sanitized according to GitHub’s sanitation rules.

Note that raw HTML in Markdown cannot be sanitized, so it’s removed. A schema can still be used to allow certain values from integrations though. To support HTML in Markdown, use rehype-raw.

For example, to add strict sanitation but allowing classNames, use something like:

// ...
var merge = require('deepmerge')
var github = require('hast-util-sanitize/lib/github')

var schema = merge(github, {attributes: {'*': ['className']}})

remark()
  .use(html, {sanitize: schema})
  .processSync(/* … */)

CommonMark

You still need to set commonmark: true in remark-parses 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.

Integrations

remark-html works great with:

All mdast nodes can be compiled to HTML. Unknown mdast nodes are compiled to div nodes if they have children or text nodes if they have value.

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), in hast
  • hProperties — Map of properties 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>

Security

Use of remark-html is unsafe by default and opens you up to a cross-site scripting (XSS) attack. Pass sanitize: true to prevent attacks. Settings sanitize to anything else may be unsafe.

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

You can’t perform that action at this time.