The rehype-raw npm package is a plugin for rehype that allows you to parse and rehype raw HTML within markdown content. It is particularly useful when you want to mix markdown with HTML and need the HTML to be processed as part of the rehype pipeline.

What are rehype-raw's main functionalities?

Parsing HTML inside Markdown

This code demonstrates how rehype-raw can be used to parse HTML tags embedded within Markdown content, allowing for complex content structures that mix Markdown and HTML seamlessly.

import unified from 'unified';
import markdown from 'remark-parse';
import remark2rehype from 'remark-rehype';
import raw from 'rehype-raw';
import html from 'rehype-stringify';

unified()
  .use(markdown)
  .use(remark2rehype, {allowDangerousHtml: true})
  .use(raw)
  .use(html)
  .process('# Hello world!\n\n<div>**bold text** inside HTML</div>', function (err, file) {
    console.log(String(file));
  });

Other packages similar to rehype-raw

rehype-raw

Reparse a HAST tree, with support for embedded raw nodes. Keeping positional info OK. 🙌

Installation

npm:

npm install rehype-raw

Usage

Say we have the following markdown file, example.md:

<div class="note">

A mix of *markdown* and <em>HTML</em>.

</div>

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

'use strict';

/* Dependencies. */
var vfile = require('to-vfile');
var report = require('vfile-reporter');
var unified = require('unified');
var markdown = require('remark-parse');
var remark2rehype = require('remark-rehype');
var raw = require('rehype-raw');
var document = require('rehype-document');
var stringify = require('rehype-stringify');

/* Process. */
unified()
  .use(markdown)
  .use(remark2rehype, {allowDangerousHTML: true})
  .use(raw)
  .use(document, {title: '🙌'})
  .use(stringify)
  .process(vfile.readSync('example.md'), function (err, file) {
    console.error(report(err || file));
    console.log(String(file));
  });

Now, running node example yields:

example.md: no issues found
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>🙌</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="note">
<p>A mix of <em>markdown</em> and <em>HTML</em>.</p>
</div>
</body>
</html>

API

`rehype().use(raw)`

Parse the tree again, also parsing “raw” nodes (as exposed by remark).

License

Keywords

FAQs

What is rehype-raw?

Is rehype-raw popular?

Is rehype-raw well maintained?

Package last updated on 20 Oct 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install