What is remark-rehype?
The remark-rehype npm package is a plugin that transforms Markdown (.md) files into HTML. It is part of the unified ecosystem and is commonly used to integrate with other unified plugins to process and manipulate content.
What are remark-rehype's main functionalities?
Markdown to HTML conversion
This feature allows you to convert Markdown content into HTML. The code sample demonstrates how to set up a unified processor that parses Markdown, converts it to HTML using remark-rehype, and then serializes it to a string.
const unified = require('unified');
const markdown = require('remark-parse');
const remark2rehype = require('remark-rehype');
const html = require('rehype-stringify');
unified()
.use(markdown)
.use(remark2rehype)
.use(html)
.process('# Hello world!', function (err, file) {
if (err) throw err;
console.log(String(file));
});
Integration with unified ecosystem
remark-rehype can be used in conjunction with other plugins in the unified ecosystem, such as rehype-format for formatting the resulting HTML. The code sample shows how to include the rehype-format plugin in the processing pipeline.
const unified = require('unified');
const markdown = require('remark-parse');
const remark2rehype = require('remark-rehype');
const rehypeFormat = require('rehype-format');
const html = require('rehype-stringify');
unified()
.use(markdown)
.use(remark2rehype)
.use(rehypeFormat)
.use(html)
.process('# Hello world!', function (err, file) {
if (err) throw err;
console.log(String(file));
});
Other packages similar to remark-rehype
remark-html
remark-html is a remark plugin to compile Markdown to HTML. It is similar to remark-rehype but does not use the rehype ecosystem, which means it has less flexibility in terms of further HTML manipulations.
showdown
Showdown is a JavaScript Markdown to HTML converter, which can be used on both the server and in the browser. Unlike remark-rehype, it is not part of the unified ecosystem and operates as a standalone converter.
![Backers](https://opencollective.com/unified/backers/badge.svg)
Bridge / mutate from remark to rehype.
Note that remark-rehype
doesn’t deal with HTML inside the markdown. You’ll
need rehype-raw
if you’re planning on doing that.
Installation
npm:
npm install remark-rehype
Usage
Say we have the following file, example.md
:
# Hello world
> Block quote.
Some _emphasis_, **importance**, and `code`.
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 html = require('rehype-stringify')
unified()
.use(markdown)
.use(remark2rehype)
.use(doc)
.use(format)
.use(html)
.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>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Hello world</h1>
<blockquote>
<p>Block quote.</p>
</blockquote>
<p>Some <em>emphasis</em>, <strong>importance</strong>, and <code>code</code>.</p>
</body>
</html>
API
Either bridge or mutate from remark (MDAST) to
rehype (HAST).
destination
If given (Unified
), runs the destination processor
with the new HAST tree, then, after running discards that tree and
continues on running the origin processor with the original tree
(bridge-mode). Otherwise, passes the tree to further
plug-ins (mutate-mode).
options
options
are passed through to mdast-util-to-hast
, if given.
Related
Contribute
See contributing.md
in remarkjs/remark
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