rehype-raw
Advanced tools
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.
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));
});Similar to rehype-raw, rehype-sanitize is a rehype plugin used to clean HTML within the documents. While rehype-raw parses raw HTML for further processing, rehype-sanitize focuses on ensuring the HTML is safe from XSS attacks, providing a layer of security by filtering out unwanted HTML tags and attributes.
rehype plugin to parse the tree again (and raw nodes). Keeping positional info OK. 🙌
Tiny wrapper around hast-util-raw
npm:
npm install rehype-raw
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:
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 doc = require('rehype-document')
var format = require('rehype-format')
var stringify = require('rehype-stringify')
var raw = require('rehype-raw')
unified()
.use(markdown)
.use(remark2rehype, {allowDangerousHtml: true})
.use(raw)
.use(doc, {title: '🙌'})
.use(format)
.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>
rehype().use(raw[, options])Parse the tree again, also parsing “raw” nodes (as exposed by
remark-rehype).
options are passed to hast-util-raw.
This project parses a hast tree with embedded raw HTML.
This typically occurs because we’re coming from Markdown, often parsed by
remark-parse.
Inside Markdown, HTML is a black box: Markdown doesn’t know what’s inside that
HTML.
So, when rehype-raw maps Markdown to HTML, it cannot understand raw embedded
HTML.
That’s where this project comes in.
But, Markdown is much terser than HTML, so it’s often preferred to use Markdown, in HTML, inside Markdown. As can be seen in the above example.
However, Markdown can only be mixed with HTML in some cases. Take the following examples:
Warning: does not work:
<div class="note">
A mix of *Markdown* and <em>HTML</em>.
</div>
…this is seen as one big block of HTML:
<div class="note">
A mix of *Markdown* and <em>HTML</em>.
<div>
This does work:
<div class="note">
A mix of *Markdown* and <em>HTML</em>.
</div>
…it’s one block with the opening HTML tag, then a paragraph of Markdown, and another block with closing HTML tag. That’s because of the blank lines:
<div class="note">
A mix of <em>Markdown</em> and <em>HTML</em>.
<div>
This also works:
<span class="note">A mix of *Markdown* and <em>HTML</em>.</span>
…Inline tags are parsed as separate tags, with Markdown in between:
<p><span class="note">A mix of <em>Markdown</em> and <em>HTML</em>.</span></p>
This occurs if the tag name is not included in the list of block tag names.
Improper use of rehype-raw can open you up to a
cross-site scripting (XSS) attack.
Either do not combine this plugin with user content or use
rehype-sanitize.
See contributing.md in rehypejs/.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.
FAQs
rehype plugin to reparse the tree (and raw nodes)
We found that rehype-raw demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
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.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.